Bàn về mô hình Data trong EXT JS 4

Nếu bạn mới làm quen Ext Js, bạn sẽ bỡ ngỡ trước những khái niệm lạ hoắc của Ext js 4 như store, model, proxy, association, sorter, filter, reader, writer… Đây là những khái niệm mới trong Ext js mà ta cần làm quen khi bắt đầu học nó.

1) Đầu tiên khi học Ext js ta phải bỏ đi khái niệm div, table, cell… Nó là những khái niệm dành cho HTML. Có thể bạn cắt HTML/Css rất giỏi, bạn là cao thủ bên Jquery… nhưng khi qua Ext Js bạn vẫn chỉ là chicken nếu vẫn giữ trong đầu suy nghĩ : “làm sao để tạo thẻ DIV, làm sao để tạo event click cho div?” Vì trong ext js ta phải nghĩ theo hướng : “Làm sao để tạo 1 panel”, “Làm sao để tạo 1 Container?”, “Làm sao để tạo 1 viewport?”. Do suy nghĩ như thế, nên khi suy nghĩ về event, hay css, ta phải suy nghĩ : “Làm sao để gán CSS vào panel?”, “Làm sao để bắt sự kiện click cho button?” => Mọi thứ là [B]component[/B], không còn là HTML ngày nào nữa!

2) Tiếp theo ta cần xác định lại tư tưởng là ta đang học 1 component, chứ không phải học 1 div(như trên đã bàn) => Khi gán hay ghép 1 giá trị nào đó, ta không được gán thẳng mà phải thông qua 1 khái niệm mới mà ExtJs cung cấp, đó là [B]config[/B]. VD: Khi ta muốn gán 1 giá trị vào 1 biến. Ta không ghi a=1; Mà ta phải ghi là setA(1).
VD :

Ext.define('My.awesome.Class', {
     // The default config
     config: {
         name: 'Awesome',
         isAwesome: true
     },
     constructor: function(config) {
         this.initConfig(config);
         return this;
     }
 });

var awesome = Ext.create('My.awesome.Class',{
    name="Super awesome"
});  
alert(awesome.getName());

Tại sao phải phức tạp như thế? Vì mỗi đối tượng là 1 class, và đôi khi 1 thành phần gồm nhiều giá trị liên quan đến nó. Biết đâu ta gán setA(1) thì không chỉ gán A=1 mà nó còn gán giá trị 1 cho B, C ở đâu đó mà ta không rõ => Luôn dùng hàm set, get khi khai báo biến.

3) Trong cùng 1 project, Controller có thể tương tác với View qua cách :
+ Reference.
+ Lắng nghe event.
– Còn View chỉ có thể tương tác với Controller qua 1 cách duy nhất là Event. Khi view muốn gọi 1 hàm của controller thì dùng lệnh fireEvent để khởi tạo event và sau đó Controller lắng nghe Event đó.

4) Thế còn khi 1 View A kế thừa từ View B . Mà trong controller của view B, làm sao để ta nghe được event của view A? Đơn giản là trong view A, ta dùng hàm relayEvent để lấy những event mà ta muốn và đưa vào trong view B. Thế là trong Controller của view B sẽ nghe được event của view A.

VD : Ta chú ý hàm relayEvent sẽ thấy win đưa 2 event của mình là clickLeaf và clickBranch cho tree. Thế là tree nghe được.

wcc.app = function() {
  // Private Variables...
  var win;
  var button;
 
  // Private Methods...
  var buildApp = function( cfg ) {
      // set up the common config params for both panels
    var dfltCfgParams = {
      split : true,
      collapsible : true,
      margins : "3 0 3 3",
      cmargins : "3 3 3 3"
    };
 
      // set up the config params for the navigation tree panel
    var treeParams = Ext.apply( {
      region : "west",
      width : 200,
      frame : true,
      title : "Navigation"
    }, cfg );
 
      // create the tree panel
    var tree = new wcc.tree(
      Ext.apply( treeParams, dfltCfgParams )
    );
 
      // create the content panel
    var content = new Ext.Panel(Ext.apply({
      title : "Content",
      region : "center",
      frame : true
    }, dfltCfgParams ));
 
      // create the window with a border layout
      // using the tree and content panels
    win = new Ext.Window({
      title    : 'Layout Window',
      closable : true,
      width    : 600,
      height   : 350,
      plain    : true,
      layout   : 'border',
      items    : [ tree, content ]
    });
 
      // Tell the window to handle the custom 'clickLeaf' and
      // 'clickBranch' events from the tree/navigation panel
    win.relayEvents(tree, ['clickLeaf', 'clickBranch']);
 
      // here's the handlers for the custom TreePanel events
      // nothing fancy for the example but lots more could be done.
    win.on( {
      'clickLeaf' : function (nodeObj, nodeAttr, nodeText) {
        console.log("Window - NodeClick - " + nodeText);
        content.body.update("Hello World... Loading Text from Leaf: " + nodeObj.id);
      },
      'clickBranch' : function(nodeObj, nodeAttr, nodeText) {
        console.log("Window - BranchClick - " + nodeText);
        content.body.update("Hello World... Loading Text from Branch: " + nodeObj.id);
      },
      scope : this
    });
  };
 
 
    // Public Area
  return {
    myTree : {},
    root : {},
 
      // I like to have information about my classes
      // embedded in the class mostly for debugging purposes
      // and documentation, but they're not needed in production
    name : "wcc:App",
    desc : "Generic App Class in private Namespace",
 
    init : function(cfg) {
      this.curFunc = this.name + ".init()";
 
      button = Ext.get("theBtn");
      button.on("click" , function() {
        buildApp( cfg );
        win.show(button);
      });
    }
  };	// End Public Return
}();

5) Khi cần thay đổi source code của ExtJs thì ta có nhiều cách, nhưng mình sẽ giới thiệu các bạn 2 cách.
+ Cách 1 là các bạn tạo subClass, class này sẽ kế thừa class bạn muốn change, và như thế bạn chỉ việc tạo function trùng với function bạn muốn change là bạn có thể overwrite.
+ Cách 2 là bạn tạo class overwrite, class này bạn tạo direct trong source của bạn, và đồng thời chèn ngang function vào. VD :

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");

        return this;
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        var instance = this.callOverridden();

        alert("Meeeeoooowwww");

        return instance;
    }
});

var kitty = new My.Cat(); 
// alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"

6) Sau khi đã rõ về cách khai báo biến thì ta phải rõ về cách mà Ext Js tương tác với database. Tùy theo phương thức mà các bạn dùng để giao tiếp với database. Trong Ext cung cấp cho bạn 4 cách(Ajax, rest, localstorage, JsonP). Nhưng nhiều nhất vẫn là phương thức REST với 4 cách tương tác cơ bản là Post, Get, Put, Delete => Ta phải nắm Rest cho rõ trước khi nói đến chuyện tương tác với database bằng Ext Js.

Post : chỉ là post dữ liệu lên server. Giống như trong HTML ta post 1 form lên nhưng với Extjs thì khác, ta post là post 1 Model
Put : là update 1 model. Ví dụ server.php/1 => update user có id=1
Delete : delete 1 user có id được chỉ ra. Ví dụ server.php/1
Get : get dữ liệu về, giống như phương thức get thuần túy. Ví dụ server.php/1

7) Data của việc trao đổi dữ liệu giữa server và client luôn là Json. Client gửi Json lên, và nhận về cũng Json.

{
    success: true,
    users: [
        { id: 1, name: 'Ed' },
        { id: 2, name: 'Tommy' }
    ]
}

8) Database hiện tại, ta có table, row, column, relationship . Còn với Extjs thì ta phải đổi cách suy nghĩ.

1 Table = 1 Store
1 Row = 1 Model
1 Column = 1 fields
Relationship = Association

9) Dùng sql trong php để truy vấn, còn trong Extjs thì ta dùng gì? Ta dùng sorter, filter…

Limit = gửi truy vấn qua phương thức rest. VD : server.php?start=1&limit=20
Where = gửi truy vấn qua phương thức rest. VD : server.php?q=abc

10) Proxies : Là cổng giao tiếp giữa Model, store với server. Thông qua proxies, ta có thể xác định xem phương thức tương tác nào là phù hợp (Rest, ajax…) . Với proxies, ngoài việc là cổng thông tin, nó còn có 1 chức năng quan trọng nữa là nó giúp ta xác định xem sẽ gọi đường dẫn nào khi truy cập 1 model, hay store tương ứng.

Chung quy lại, mô hình data trong Extjs là 1 mô hình kế thừa từ mô hình CSDL truỳên thống. Và bản chất của nó vẫn chỉ là dùng lại từ CSDL. Ví dụ khi ta muốn sort, thì ta phải gửi lệnh sort lên server. Và ở server chắc chắn ta phải có lệnh sort thì hàm sort của Extjs mới chạy. Tương tự như vậy, khi ta muốn tạo filter thì trên server ta phải có lệnh filter thì hàm filter của Extjs mới chạy…

Còn rất nhiều điều bạn sẽ khám phá ra khi làm việc với mô hình Extjs, chắc chắn bạn sẽ ồ lên khi khám phá ra rằng Extjs thật hay khi đã sáng tạo ra con đường mới, làm thay đổi suy nghĩ của mọi người rằng : “Website tĩnh không thể lập trình, tương tác với database tốt bằng website có hỗ trợ ngôn ngữ lập trình như PHP, ASP, JSP được!”. Thực sự Extjs đã làm được và còn làm nhiều hơn sự mong đợi của chúng ta !

Advertisements

7 thoughts on “Bàn về mô hình Data trong EXT JS 4

  1. Chao ban, minh da doc bai cua ban va cam thay rat chuyen nghiep, ban co the cho minh mo so tai lieu can ban ve ExtJs duoc khong, minh moi tim hieu no, mong ban giup do. neu duoc ban co the gui qua cho minh theo dia chi:
    Email: nguyenquocchinh_qnu@yahoo.com.vn
    NickYahoo: nguyenquocchinh_qnu
    Skype: chinhnqvtm

    Rat mong duoc su giup do cua ban! Cam on ban.

  2. Hi, Song20002005!

    Hiện tại mình cũng đang làm chuyên đề về Extjs. Bạn có thể giúp mình rắc rối sau không?

    Đây là 2 model mình tạo sẵn, dùng load dữ liệu gồm hai bảng có mối quan hệ với nhau

    // khoi
    Ext.define(‘Grade’, {
    extend: ‘Ext.data.Model’,
    idProperty: ‘id’,
    fields: [‘id’, ‘name’, ‘profile_image_url’],
    belongsTo: ‘Company’
    });
    // cong ty
    Ext.define(‘Company’, {
    extend: ‘Ext.data.Model’,
    idProperty: ‘id’,
    fields: [‘id’, ‘name’, ‘profile_image_url’],
    hasMany: {
    model: ‘Grade’,
    name: ‘grades’,
    //autoLoad: true,
    associationKey: ‘Grades’// quan trong, can phai co va phai la ten cua model con
    }
    });

    Mình muốn load dữ liệu lên treepanel như sau:
    nút cha là Company
    —–> nút con là Grade

    Nhưng hiện tại mình chỉ có thể add vào nút cha Company, còn nút con thì chưa được!

    Hy vọng bạn có thể giúp mình vấn đề trên
    Thanks!

    Mail: nvthuan@hotmail.com
    Yahoo: jackytoral

  3. trong ext js 4.0 thì hasmany hay belongsto vẫn còn nhiều bất cập cho nên mình chưa sử dụng nó nhiều. Còn việc bạn add nút cha và nút con thì mình thấy trong tutorial của Sencha có hướng dẫn khá rõ, bạn chỉ việc follow theo nó là làm được thôi.

    http://docs.sencha.com/ext-js/4-1/#!/guide/grid

    Ở chỗ nhập nút con bạn chỉ việc thêm combobox và options của combobox này là list các nut cha.

  4. Hi !!!
    Mình đang làm một đề tài kết hợp giữa Zend và ExtJS.
    Nhưng mình không biêt kết nối dữ liệu từ model trong zend vào form của ExtJS như thế nào?
    Bạn có thể giúp mình được không?
    Cám ơn bạn nhiều!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s