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
        }
    });
});

对应的，应该对其他的grid做如下更改：

Ext.ns('YC','YC.Major');

YC.Major.Grid = Ext.extend(Ext.grid.GridPanel, {
    enableColumnMove : true,
    stripeRows : true,
    frame : true,
    border: true,
    layout : "fit",
    loadMask : true,

    initComponent: function() {
        this.viewConfig = {
            // add view configuration here.
        };

        this.store = this.buildStores()[0];

        this.tbar = this.buildTopToolbar();
        this.bbar = this.buildBottomToolbar();
        //如果重设sm并再次执行initComponent方法，这样写就不会覆盖更改。        
        this.sm = (this.sm) ? this.sm : new Ext.grid.CheckboxSelectionModel();
        this.cm = this.buildCm();
        this.on("rowdblclick", this.onrowdblclick, this);
        YC.Major.Grid.superclass.initComponent.call(this);
        //如果这句放在上面基类方法调用之前，那么这句代码将无效：this.onSelectionChange方法不会被触发。
        this.getSelectionModel().on('selectionchange', this.onSelectionChange, this);
    },

    buildSM : function() {
        return new Ext.grid.CheckboxSelectionModel();
    },

    //Build Tool Bar
    buildTopToolbar : function() {
        return [
            {
                xtype : "tbbutton",
                minWidth : 80,
                ref : '../addBtn',
                text : "添加项",
                cls : "x-btn-text-icon",
                icon : "/Content/icons/add.png",
                handler : this.onAdd,
                scope: this
            },
            "-",
            {
                xtype : "tbbutton",
                ref : '../delBtn',
                minWidth : 80,
                disabled : true,
                text : "删除项",
                cls : "x-btn-text-icon",
                icon : "/Content/icons/delete.png",
                handler : this.onDelete,
                scope : this
            },
            "-",
            {
                xtype : "tbbutton",
                minWidth : 80,
                text : "双击修改项",
                cls : "x-btn-text-icon",
                icon : "/Content/icons/pencil.png",
                disabled : true
            }
        ];
    },
    buildBottomToolbar : function() {
        return new Ext.PagingToolbar({
            displayInfo : true,
            emptyMsg : "没有数据显示",
            displayMsg : "显示从{0}条数据到{1}条数据，共{2}条数据",
            store : this.store,
            pageSize : ALL_PAGESIZE_SETTING,
            plugins : [this.filters]
        });
    },
    
    //CURD handlers
    onAdd : function(btn, e) {
        this.showEditFormWinFn(this.store.reader, "添加专业");
    },
    onDelete : function(btn, e) {
        JsHelper.DelConfirm(function(btn) {
            if (btn == 'yes') {
                // gridEditor.stopEditing();
                var s = this
                        .getSelectionModel()
                        .getSelections();
                for (var i = 0, r; r = s[i]; i++) {
                    this.store.remove(r);
                }
            }
        });
    },
    onrowdblclick : function(g, rowIndex, e) {
        var store = g.getStore();
        var id = store.getAt(rowIndex).get("Id");
        this.showEditFormWinFn(this.store.reader, "修改专业", id);
    },
    onSelectionChange : function(sm) {
        this.delBtn.setDisabled(sm.getCount() < 1);
    },    

    //Grid Filters
    filters : new Ext.ux.grid.GridFilters({
        encode : true,
        filters : [{type: 'string',dataIndex: 'Name'},
{type: 'date',dataIndex: 'CreateTime'},
{type: 'boolean',dataIndex: 'IsDelete'},
{type: 'string',dataIndex: 'Id'}]
    }),
    
    //Stores. Add additional stores in this function.
    buildStores : function() {
        var store = new Ext.data.Store({
            url : "/Major/GetPlist",
            remoteSort : true,
            reader : new Ext.data.JsonReader({
                root : 'data',
                totalProperty : 'total',
                id : 'Id'
            }, [
{name: 'Name',type: 'string'},
{name: 'CreateTime',type: 'date'},
{name: 'IsDelete',type: 'boolean'},
{name: 'Id',type: 'string'}
            ])
        });
        store.on('remove', this.onStoreRemove, this);
        store.setDefaultSort('Name', 'ASC');
        return [store];
    },
    onStoreRemove : function(thiz, record, index) {
        Ext.Ajax.request({
            url : '/Major/Delete',
            params : {
                'Id' : record.data.Id
            },
            success : function(response, opts) {
                var result = Ext.util.JSON
                        .decode(response.responseText);
                if (result.success == false) {
                    JsHelper.ShowError(result.msg);
                    this.store.insert(0, record);
                }
            }
        });
    },    
    
    //Build the popup win.
    //必须在new FormPanel的时候就设置formReader。如果new完了在用例如form.reader = formReader的方式将会无效，症状是值不会赋给datafield.
    buildWin : function(formReader) {
        var form = new Ext.FormPanel({
            id : 'mainForm',
            border : false,
            waitMsgTarget : true,
            labelWidth : 90,
            frame : true,
            reader : formReader,
            bodyStyle : 'padding:5px 5px 0',
            labelAlign : 'right',
            layout : 'tableform',
            layoutConfig : {
                columns : 2
            },
            defaultType: 'textfield',
            defaults: {
                allowBlank: false,
                 150
            },
            items : [{name: 'Name',xtype: 'textfield', fieldLabel : '专业名称'}],
            buttonAlign : 'center',
            buttons : this.buildFormButtons()
        });
        var win = new Ext.Window({
            iconCls : 'application_form',
            width : 700,
            resizable : false,
            constrain : true,
            autoHeight : true,
            modal : true,
            closeAction : 'close',
            plain : true,
            items : [form]
        });
        return win;
    },
    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 : '/Major/SaveOrUpdate',
                        params : {
                            'Id' : (form.updateEdit) ? form.entityId : ""
                        },
                        success : function(form, action) {
                            this.store.setDefaultSort(
                                    'Name', 'ASC');
                            this.store.load({
                                params : {
                                    start : 0,
                                    limit : ALL_PAGESIZE_SETTING
                                }
                            });
                            this.win.destroy();
                        },
                        failure : function(form, action) {
                            JsHelper
                                    .ShowError(action.result.msg);
                        }
                    });
                }
            },
            scope: this
        });
        var btnCancel = new Ext.ux.CancelBtn({
            handler : function() {
                this.win.destroy();
            },
            scope : this
        });
        return [btnSubmit, btnCancel];
    },
    showEditFormWinFn : function(formReader, title, id) {
        this.win = this.buildWin(formReader);
        var updateEdit = Ext.isDefined(id);
        var formLoadArgs = (updateEdit) ? {
            url : '/Major/Get',
            params : {
                'Id' : id
            },
            waitMsg : '数据加载中...'
        } : null;

        var form = this.win.items.items[0];
        form.reader = formReader;
        form.updateEdit = updateEdit;
        form.entityId = id;
        this.win.title = title;
        this.win.show();
        if (formLoadArgs) {
            form.load(formLoadArgs);
        }
    },    
    
    //Build the grid ColumnModel
    buildCm : function() {
        return new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), this.sm,
{header: '专业名称',dataIndex: 'Name',sortable: true},
{header: '创建时间',dataIndex: 'CreateTime',sortable: true}
        ]);
    }
});

Ext.reg("ycmajorgrid", YC.Major.Grid);

注意注释。