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

Posted 2023-02-26

【中文标题】带有复选框 selModel 的 ExtJs Gridpanel 窗口，在第二次打开时不显示复选框

【英文标题】：ExtJs Gridpanel Window with checkbox selModel , on second opening doesn't display checkboxes

【发布时间】：2014-09-18 09:14:26

【问题描述】：

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

在按钮单击处理程序上，窗口第一次完美地打开了带有复选框的网格。

第二次或以后打开它时，复选框不可见。我将在网格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);
                
            
        
    
)

我哪里错了？

更新：

- 在按钮处理程序中 - 打开带有输入条目的表单 - 在提交表单时 - 打开一个带有复选框的窗口 - 存储中的网格

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

);

【问题讨论】：

你能把它放在一个 JSFIddle 里吗？

请贴出window/grid config的完整代码。最好fiddle.sencha.com

由于某种原因无法将它们放入小提琴中 - 但我已经更新了上面的 sn-ps

不要在类定义中声明实例。

@EvanTrimboli 你指的是选择模型声明吗？

【参考方案1】：

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

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

在上面窗口配置的initComponent中，我创建了selModel配置对象的一个​​新实例，并将它包含在items - > grid 实例，这样复选框就不会消失了

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

谢谢大家的帮助！！！