带有复选框selModel的ExtJs Gridpanel窗口,在第二次打开时不显示复选框

时间:2014-09-18 09:14:27

标签: extjs checkbox window extjs4.1 gridpanel

我在窗口内有一个带有复选框选择模型的网格面板。

在按钮单击处理程序上,该窗口首次完美地打开带有复选框的网格。

第二次或以后打开时,复选框不可见。我将在网格Ext.define()中进行显式实例创建。

  selModel: Ext.create('Ext.selection.CheckboxModel', {
    mode: 'SIMPLE',
    checkOnly: true,
    listeners: {
        selectionchange: function (model, selections) {
            if (selections.length > 10) {
                Ext.Msg.alert('Info', 'Max of only 10 selections allowed');

                for (var i = 10; i < selections.length; i++) {
                    var record = selections[i];
                    model.deselect(record, true);
                }
            }
        }
    }
})

我在哪里错了?

  

更新

- 在按钮处理程序内 - 打开带有输入条目的表单   - 在表单提交上 - 打开一个带有复选框的窗口 - storeload

中的网格
        checkGridStore.load({
                        scope: this,
                        callback: function (records, operation, success) {                               
                            var firstWindowWithCheckGrid= Ext.widget('gridwindow', {                                  
                                 id: 'firstWindowWithCheckGrid'
                            });
                            firstWindowWithCheckGrid.show();
                        }
                    });

窗口配置:

 Ext.define('Sample.view.GridWindow', {
extend: 'Ext.window.Window',
alias: 'widget.gridwindow',
height: 500,
width: 1500,
modal: true,
layout: 'fit',
forceFit: true,
listeners: {
    beforeshow: function (window) {
        window.doLayout();
    }
},
buttons: [
    {
        text: 'Submit',
        handler: function () {
            var selectedRows = Ext.getCmp('statusGrid').getSelectionModel().getSelection();

            // do something

            Ext.getCmp('firstWindowWithCheckGrid').close();


            // do something

            secondStore.load({
                scope: this,
                callback: function (records, operation, flag) {
                    if (records.length > 0) {
                        var secondWindowWithoutCheckGrid = Ext.create('GridWindow', {
                            id: 'statusWindow',
                            items: {
                                xtype: 'gridpanel'

                            },
                            buttons: [
                                {
                                    text: 'Close',
                                    handler: function () {
                                        secondWindowWithoutCheckGrid .close();
                                    }
                                }
                            ]
                        }).show();
                    }
                }
            });
        }
    },
    {
        text: 'Close',
        handler: function () {
            try {
                Ext.getCmp('firstWindowWithCheckGrid').close();
            } catch (error) {

            }
        }
    }
],
initComponent: function () {
    this.items = [
        {
            xtype: 'statusgrid',
            id: 'statusGrid'
        }
    ]
    this.callParent(arguments);
}

});

网格配置

 Ext.define('Sample.view.StatusGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.statusgrid',
multiSelect: true,
emptyText: 'No Matching Records',
stripeRows: true,
columnLines: true,
store: 'SomeStore',
autoScroll: true,
margin: '5 5 5 5',
selModel: Ext.create('Ext.selection.CheckboxModel', {
    mode: 'SIMPLE',
    listeners: {
        selectionchange: function (model, selections) {
            if (selections.length > 10) {
                Ext.Msg.alert('Info', 'Max of only 10 selections allowed');

                for (var i = 10; i < selections.length; i++) {
                    var record = selections[i];
                    model.deselect(record, true);
                }
            }
        }
    }
}),
columns: [
   // columns

]
initComponent: function () {
    this.callParent(arguments);
}

});

1 个答案:

答案 0 :(得分:3)

我以这种方式修复它 - 感谢@EvanTrimboli的提示

  1. 我删除了网格定义中的selModel实例。

  2. 在上面窗口配置initComponent内,我创建了selModel配置对象的新实例,并将其包含在项< / em> - &gt; 网格实例,因此复选框不会再消失

    initComponent: function () {
    
    var selModel= Ext.create('Ext.selection.CheckboxModel', {
        mode: 'SIMPLE',
        hidden: true,
        listeners: {
            selectionchange: function (model, selections) {
                if (selections.length > 10) {
                    Ext.Msg.alert('Info', 'Max of only 10 selections allowed');
    
                    for (var i = 10; i < selections.length; i++) {
                        var record = selections[i];
                        model.deselect(record, true);
                    }
                }
            }
        }
    });
    
    this.items = [
    {
        xtype: 'statusgrid',
        id: 'statusGrid',
        selModel: selModel
    }
    ]
    this.callParent(arguments);
    }        
    
  3. 谢谢大家的帮助!!!