【ExtJS】雜記

被騙去做這個 framework 的系統改寫專案，很多用法很容易寫完就忘了，所以寫一些給自己之後可以查的筆記。
注意，文中方法包含自訂實作，照抄很可能編不過


以 id 取得 component

Ext.getCmp('id');
// ex
var lblAssignCount = Ext.getCmp('_lblAssignCount');

文字內容使用 label 物件表達

{
    xtype: 'label',
    style: 'padding: 0 0 0 2px;',
    text: 'txt'
}

初始化元件用的 store

storeXXX = new Ext.data.JsonStore(
{
    fields:
    [
        'NAME', 'VALUE'
    ],
    data: _$XXX
});
 
cmbBatch = new Ext.form.ComboBox(
{
    fieldLabel: _XXX,
    store: storeXXX,
    displayField: 'NAME',         
    valueField: 'VALUE',
    disabled: false
});

其中 _$XXX 由後端取回

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
        return;
    AppendData("XXX", getXXX());
}

Jquery 前後端 ajax 溝通

// client
$.ajax({
    url: 'page.aspx',
    cache: false,
    async: false,
    // send
    data: { ID: value ,ajaxMethod:'ServSideMethodName'},
    type: 'post',
    // recv
    success: function (data) {        
        person.name = data.name;
        person.age = data.age;
    },
    dataType: 'json'
});
 
//serv
public void ServSideMethodName()
{
    // recv
    var id = GetParamNonEncrypt("ID");
    Person p = queryPersonInfoById(id);
    
    // send
    var jsonResult = new
    {
        name = p.Name,
        age = p.Age
    };
    Response.Write(EnJson(jsonResult));
}
 

指定匿名方法給 handler

btnXXX= new Ext.Button({  
    text: 'xxx',
    handler: function () {
        doSomthing();
    }
});

JavaScript 執行階段錯誤: 無法取得未定義或 Null 參考的屬性 'xxx'
這個錯一般是它的上一層沒有正確的取到東西，才造成下一層帶不出該有的屬性或方法。
比方說，
JavaScript 執行階段錯誤: 無法取得未定義或 Null 參考的屬性 'toLowerCase'
在 record.data.ALMARK_123456.toLowerCase() 發生
錯誤是出在 ALMARK_123456 未定義，而不是 toLowerCase() 未定義。


store 取值流程

// client
var colMod = new Ext.grid.ColumnModel({
    columns: [
        {
            header: _col1,
            dataIndex: 'col1',
            width: 100,
            sortable: false
        },
    ...
    ]
});
 
var dataSet = null;
$.ajax({
    url: 'pageName.aspx',
    cache: false,
    async: false,
    // send
    data: { ajaxMethod: 'AjaxGetStoreData', par: par },
    type: 'post',
    // recv
    success: function (data) {
        dataSet = data.dt;
    },
    dataType: 'json'
});
 
storeOfGrid = new Ext.data.JsonStore({
    fields: ['col1', ...],
    data: dataSet
});
 
var myGrid = new Ext.grid.GridPanel({
    id: "myGrid",
    frame: false,
    border: false,
    enableColumnMove: false,
    enableColumnResize: false,
    autoEncode: true,
    height: 150,
    cm: colMod
});
 
// serv
public void AjaxGetStoreData()
{
    try
    {
        string par = GetParam("par");
        var resultSet = someInstance.DoSomthing(par);
        var jsondata = new { dt = resultSet.Tables[0] };
        Response.Write(EnJson(jsondata));
    }
    catch (Exception ex)
    {   
    }
}

已設定過的 store 與 grid 重設定

newStore = new Ext.data.JsonStore(
{
    fields: [
        'col1', ...
    ],
    data: newSrc
});
myGrid.reconfigure(newStore, colMod);