Nhật ký học tập

Thuộc tính Mixins là một khái niệm mới trong Ext Js. Mixins tập hợp các phương thức và thuộc tính của các class khác để đưa vào một class nào đó. Đây là thuộc tính hết sức quan trọng, cho phép class cần định nghĩa có những tính năng quan trọng từ class khác mà bạn không thể kế thừa từ chúng. Ví dụ: Ext.define('MyApp.mixins.Log', { startLogging: function () { console.log('called funcion startLogging'); } }); Ext.define('MyApp.MyWindow', { extend: 'Ext.Window', mixins: { console: 'MyApp.mixins.Log' } }); var win = Ext.create('MyApp.MyWindow', { title: 'Hello', height: 200, width: 400, renderTo: Ext.getBody() }).show(); win.startLogging(); Trong trường hợp class MyWindow cũng có hàm console, bạn có thể override hoặc kết hợp cả 2 hàm này lại với nhau Ext.define('MyApp.MyWindow', { exten...

Layout hay còn gọi là dàn trang, bố cục trình bày dữ liệu. Trong Ext Js, layout là một trong những thành phần quan trọng nhất bởi vì nó định nghĩa container được sắp xếp như thế nào. Việc sắp xếp và hiển thị các thành phần trên trang web rất khó và đòi hỏi nó phải hoạt động tốt. Vì vậy, bạn sẽ bắt gặp nhiều định nghĩa về layout trong Ext Js: Container Layouts: Auto Layout, Anchor Layout, Absolute Layout… Component Layouts: Dock Layout, Tool Layout, Field Layout, Trigger Field Layout. Component Layout chịu trách nhiệm sắp xếp các phần tử html cho một Component. Container Layout chịu trách nhiệm sắp xếp các phần tử nằm trong container chứa nó và điều chỉnh kích thước của tất cả các container con khác. Trong bài viết này, mình không có tham vọng giới thiệu tất cả các layout, mà chỉ giới thiệu một vài layout trong đó. Bạn có thể tham khảo và tìm thêm tài liệu ở trang Sencha.com

Trong bài viết này, chúng ta sẽ khám phá sự khác nhau về cú pháp khi định nghĩa class của Ext Js 3 và 4. Và bạn sẽ thấy được lợi ích khi dùng Ext Js 4. Định nghĩa class Để định nghĩa class, trong Ext Js 3, chúng ta kế thừa từ class Object: MyApp.NewClass = Ext.extend(Object, { //class functionalities here }); Trong Ext Js 4, chúng ta định nghĩa theo cấu trúc sau: Ext.define('MyApp.NewClass', { //class functionalities here }); Ext.extend là hàm cũ, và được khuyến khích sử dụng Ext.define để thay thế.

Trên trang chủ của Sencha, chỉ có đường dẫn file javascript phân phối dạng CDN. Trong trường hợp bạn muốn sử dụng css thì có thể dùng cách sau đây để tìm link: Đường dẫn file javascript Ext Js 4.1: http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js Cú pháp: [trang chủ]/ext-[version]-[license]/[tên file].js Để tìm đường dẫn file css bạn theo cú pháp: [trang chủ]/ext-[version]-[license]/resources/css/[tên file].css Theo cú pháp trên ta có file css tương ứng: http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css Chúc các bạn thành công!

Ajax (Asynchronous JavaScript and XML) là là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. Trong ExtJs, Ajax là 1 phần quan trọng, không thể thiếu và hầu như bạn phải làm việc rất thường xuyên. Ext.Ajax.request({ url: 'page.php', params: { id: 1 }, success: function(response){ var text = response.responseText; // process server response here } }); Mặc định, mỗi request có thời gian timeout là 60s, request theo phương thức "GET". Nếu bạn truyền params thì request sẽ theo phương thức "POST".

Suốt mấy không thể tìm ra lỗi vì sao arrayStore không load được, thì ra là thiếu expandData: true The config option expandData for ArrayStore is missing in API docs: http://dev.sencha.com/deploy/dev/doc...ata.ArrayStore Proposed documentation: "When set to true and loadData is called the supplied data will be expanded from ['a', 'b', 'c'] to [['a'], ['b'], ['c']]" or something... Ví dụ: var store = Ext.create('Ext.data.ArrayStore', { model: 'JobA', data: data, expandData: true // this is tied to ArrayStore#loadData only });

Hôm nay, mình sẽ hướng dẫn cách cài đặt và các thao tác cơ bản trong Ext Js. Cài đặt thư viện Trước khi bắt đầu với Ext Js, bạn phải download thư viện ở trang Sencha.com Sau khi giải nén, bạn sẽ thấy rất nhiều thư mục và file, nhưng bạn chỉ cần quan tâm đến 2 file: ext-all.css ext-all.js Đây là 2 file cần thiết tối thiểu để chạy được Ext Js. Ngoài ra nếu các bạn có sử dụng hình ảnh thì thêm thư mục "themes" vào. Lưu ý : Thư mục Themes và thư mục css phải nằm cùng cấp với nhau.

Ext Js là gì? Ext Js (Extended Javascript) là một framework Javascript thuần túy để xây dựng các ứng dụng Web tương tác bằng cách sử dụng các kỹ thuật như Ajax, DHTML và DOM. Phiên bản đầu tiên là một thư viện mở rộng của YUI được xây dựng bởi Jack Slocum, bao gồm các khả năng tương tác với Jquery và Prototype. Bắt đầu từ phiên bản 1.1, Ext Js được phát triển thành 1 thư viện độc lập Tham khảo các demo tại: http://www.extjs.com/deploy/dev/examples