Ext Js 之坑

本专题作为开发笔记持续更新，记录遇到的各种坑以备查。

2010/5/16: 

Context: 以上一篇随笔中的Grid为例。例如，有两个Grid，一个是主类别，一个是子类型，分别定义在独立的另外两个文件中。另外有一个init.js用来组装这两个grid，可以这样：

Ext.onReady(function() {
    var RankDefGrid = new YC.RankDef.Grid();
    var grid = new YC.Major.Grid();
    //直接量在new完grid之后再赋值没有问题。
    grid.region = "west";
    grid.width = 300;
    //尝试过直接修改store.url属性。但request的时候依然是原来的url。跟踪源码，发现应该如下设置。
    RankDefGrid.store.proxy.api["read"].url = "/RankDef/GetByRefEntityIdWithPaging";
    grid.sm = new Ext.grid.CheckboxSelectionModel({
        singleSelect : true,
        listeners : {
            'rowselect' : function(sm, rowIndex, r) {
                var id = sm.getSelected().get("Id");
                if (RefConfigTab.getActiveTab().getId() == "Major_RankDef_ConfigPanel") {
                    RankDefGrid.store.removeAll();
                    RankDefGrid.store.baseParams["Id"] = grid.getSelectionModel()
                            .getSelected().get("Id");
                    RankDefGrid.store.baseParams["refEntityName"] = "Major";
                    RankDefGrid.store.load({
                        params : {
                            start : 0,
                            limit : ALL_PAGESIZE_SETTING
                        }
                    });
                }
            },
            'rowdeselect' : function(sm, rowIndex, r) {
                RankDefGrid.store.removeAll();
            }
        }
    });
    //重设了sm。对应的，cm起始需要更改。所以把原来grid的initComponent方法中的原代码：
    //this.sm = new Ext.grid.CheckboxSelectionModel();改成：
    //this.sm = (this.sm) ? this.sm : new Ext.grid.CheckboxSelectionModel();并重新
    //调用initComponent方法。
    grid.initComponent();
    RankDefGrid.buildFormButtons = function() {
        var btnSubmit = new Ext.ux.SubmitBtn({
            handler : function() {
                var form = this.win.items.items[0];
                if (form.getForm().isValid()) {
                    form.getForm().submit({
                        url : '/RankDef/SaveOrUpdate',
                        params : {
                            'Id' : (form.updateEdit) ? form.entityId : "",
                            'Major':grid.getSelectionModel().getSelected().get("Id")
                        },
                        success : function(form, action) {
                            RankDefGrid.store.setDefaultSort(
                                    'Value', 'ASC');
                            RankDefGrid.store.load({
                                params : {
                                    start : 0,
                                    limit : ALL_PAGESIZE_SETTING
                                }
                            });
                            RankDefGrid.win.destroy();
                        },
                        failure : function(form, action) {
                            JsHelper
                                    .ShowError(action.result.msg);
                        }
                    });
                }
            },
            //scope 在这里没用...不知道为什么，所以把上面handler中的原来的"this"都改成了直接引用“RankDefGrid”
            scope: RankDefGrid
        });
        var btnCancel = new Ext.ux.CancelBtn({
            handler : function() {
                this.win.destroy();
            },
            scope : RankDefGrid
        });
        return [btnSubmit, btnCancel];
    };
    //应用sequence来添加赋值逻辑。
    Ext.sequence(RankDefGrid, 'showEditFormWinFn', function() {
        var form = RankDefGrid.win.items.items[0];
        var theMajor = form.form.findField("MajorText");
        theMajor.setValue(grid.getSelectionModel().getSelected().get("Name"));
    });

    var RefConfigTab = new Ext.TabPanel({
        id : "Major_RefConfigTab",
        frame : true,
        border : true,
        region : "center",
        autoScroll : true,
        enableTabScroll : true,
        activeTab : 0,
        items : [new Ext.Panel({
            id : 'Major_RankDef_ConfigPanel',
            title : '级别定义',
            autoScroll : true,
            layout : 'fit',
            border : false,
            items : [RankDefGrid],
            listeners : {
                'activate' : function(p) {
                    if (grid.getSelectionModel().getSelected()) {
                        RankDefGrid.store.removeAll();
                        RankDefGrid.store.baseParams["Id"] = grid.sm
                                .getSelected().get("Id");
                        RankDefGrid.store.baseParams["refEntityName"] = "Major";
                        RankDefGrid.store.load({
                            params : {
                                start : 0,
                                limit : ALL_PAGESIZE_SETTING
                            }
                        });
                    }
                    //                    }
                }
            }
        })]
    });
    var main = new Ext.Panel({
        border : false,
        layout : 'border',
        items : [grid, RefConfigTab]
    });
    JsHelper.ExtTabDoLayout(main);
    grid.store.load({
        params : {
            start : 0,
            limit : ALL_PAGESIZE_SETTING
        }
    });
});