ExtJS4: Cách chuyển đối số cho initComponent

Question

Tôi đang sử dụng Kiến trúc sư Sencha 2. Tôi đang cố tạo một phần tử giao diện người dùng chung với tìm kiếm văn bản và bảng hiển thị kết quả. Chung có nghĩa là tôi muốn sử dụng nó cho một số loại tìm kiếm khác nhau, ví dụ: cho người dùng, hoặc vai trò hoặc vẫn còn một cái gì đó khác.

Vì vậy, những gì tôi chắc chắn thích trong bối cảnh này về Sencha Architect 2 là nó luôn tạo ra các lớp. Đây là lớp tạo của tôi:

Ext.define('ktecapp.view.ObjSearchPanel', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.objsearchpanel', 

    height: 250, 
    id: 'UserSearchPanel', 
    itemId: 'UserSearchPanel', 
    width: 438, 
    layout: { 
     columns: 3, 
     type: 'table' 
    }, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'textfield', 
        itemId: 'txtSearchText', 
        fieldLabel: 'Search Text', 
        colspan: 2 
       }, 
       { 
        xtype: 'button', 
        id: 'searchObj', 
        itemId: 'searchObj', 
        text: 'Search', 
        colspan: 1 
       }, 
       { 
        xtype: 'gridpanel', 
        height: 209, 
        itemId: 'resultGrid', 
        width: 430, 
        store: 'UserDisplayStore', 
        colspan: 3, 
        columns: [ 
         { 
          xtype: 'gridcolumn', 
          width: 60, 
          dataIndex: 'ID', 
          text: 'ID' 
         }, 
         { 
          xtype: 'gridcolumn', 
          width: 186, 
          dataIndex: 'DISPLAYNAME', 
          text: 'Displayname' 
         }, 
         { 
          xtype: 'gridcolumn', 
          width: 123, 
          dataIndex: 'JOBTITLE', 
          text: 'Job Title' 
         }, 
         { 
          xtype: 'actioncolumn', 
          width: 35, 
          icon: 'icons/zoom.png', 
          items: [ 
           { 
            icon: 'icons/zoom.png', 
            tooltip: 'Tooltip' 
           } 
          ] 
         } 
        ], 
        viewConfig: { 

        }, 
        selModel: Ext.create('Ext.selection.CheckboxModel', { 

        }) 
       } 
      ] 
     }); 
     me.callParent(arguments); 
    } 
}); 

Vấn đề tôi đang gặp là tất cả mọi thứ cần phải được khá tùy biến, dataIndexes của các cột, cửa hàng, ... Vậy làm thế nào tôi có thể nhận được một constructor như chức năng cho lớp ObjSearchPanel nơi tôi vượt qua tất cả các thông tin đó? Trong đoạn mã trên tất cả điều này có vẻ khá nhiều hardcoded ...

Cảm ơn trước Kai

Answer 1

Trên thực tế (trong ExtJS 4), khi bạn chuyển đối tượng cấu hình tới hàm tạo, đối tượng cấu hình này được gán cho biến số this.initialConfig và vẫn có sẵn cho các hàm khác của lớp. Vì vậy, bạn có thể sử dụng nó trong initComponent.

Bạn vẫn có thể tìm thấy mã trong ExtJS 3.3 như thế này Ext.apply(this, Ext.apply(this.initialConfig, config)); trong các lớp học initComponent. Tuy nhiên, sử dụng nó có nguy cơ của riêng bạn bởi vì điều này không có trong tài liệu của ExtJS 4, chỉ tìm thấy nó trong mã nguồn.

Answer 2

sử dụng cấu hình,

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-config

Ext.define('SmartPhone', { 
    config: { 
     hasTouchScreen: false, 
     operatingSystem: 'Other', 
     price: 500 
    }, 
    constructor: function(cfg) { 
     this.initConfig(cfg); 
    } 
}); 

var iPhone = new SmartPhone({ 
    hasTouchScreen: true, 
    operatingSystem: 'iOS' 
}); 

iPhone.getPrice(); // 500; 
iPhone.getOperatingSystem(); // 'iOS' 
iPhone.getHasTouchScreen(); // true; 
iPhone.hasTouchScreen(); // true