ExtJs 同一页面上的两个或多个网格

Posted 2023-02-23

【中文标题】ExtJs 同一页面上的两个或多个网格

【英文标题】：ExtJs two or more grids on same page

【发布时间】：2013-04-02 08:46:49

【问题描述】：

我是 ExtJS 的新手。

我在同一页面上有两个网格。第一个网格有 3 列。第二只。问题是当第二个被渲染时，它会覆盖第一个网格的属性。

例如，当我尝试在第一个网格中编辑行时，它会从第二个网格中获取行的宽度。

变量 $booleanArray = [ ['拒绝'，'拒绝']， ['允许'，'允许'] ]; var myPageSize = 10; Ext.Loader.setConfig( enabled: true ); 分机要求（[ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*' ]); Ext.onReady（函数（） Ext.define('CharacteristicModel', 扩展：'Ext.data.Model', 字段：[name：'name'，name：'value'，name：'order']， 验证：[ 类型：'长度'， 字段：'名称'， 分钟：1 ] ); var featuresStore = new Ext.data.Store( 代理 ： 模型：'CharacteristicModel'， 类型：“休息”， 接口： 阅读：admin_path + '/getCharacteristics/1/', 创建：admin_path + '/saveCharacteristics/1/', 更新：admin_path + '/saveCharacteristics/1/', 销毁：admin_path + '/destroyCharacteristic/1/' , 读者： 类型：'json'， 根：'数据'， 总属性：'total_count' , 作者： 类型：'json'， 根：'数据' , 缓冲：真 , 听众： 阅读：功能（响应） , 加载：函数（存储） , 写：函数（存储，操作） 存储.load(); , 页面大小：我的页面大小， 自动加载：开始：0，限制：myPageSize， 自动同步：真 ); var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); var featuresGrid = new Ext.grid.GridPanel( id : '特征网格', renderTo : 'characteristics_grid_div_1', 商店：特性商店， 宽度：480， 有状态的：真， stateId : 'characteristicsGrid', 标题：'网格“1”'， iconCls : '图标用户', 听众： itemdblclick: 函数 (dv, row, item, index, e) dv.refresh(); dv.getGridColumns()[0].setEditor( 禁用：真， 可编辑：假 ); if (row.data.id == 6 || row.data.id == 7) dv.getGridColumns()[1].setEditor( xtype：'组合'， 存储：新的 Ext.data.ArrayStore( 字段：['abbr'，'action']， 数据：$布尔数组 ), displayField : '动作', 值字段：'缩写'， 模式：'本地'， 预输入：假， triggerAction: '全部', 惰性渲染：是的， emptyText : '选择动作' ); 否则 if (row.data.id == 8 || row.data.id == 11) dv.getGridColumns()[1].setEditor( 禁用：真， 可编辑：假 ); 别的 dv.getGridColumns()[1].setEditor( xtype：'文本字段' ); , 列 ： [ id : '名字', text : '账户特征', 可排序：假， 宽度：340， 固定：真的， 数据索引：'名称' , id : '价值', 文本：'值'， 可排序：假， 数据索引：'值'， 宽度：70， 固定：真的， 编辑： xtype：'文本字段' , 渲染器：函数（值，字段） if (field.record.data.id == 6 || field.record.data.id == 7) if ($booleanArray[0][0] != value) 值 = $booleanArray[1][1]; 别的 值 = $booleanArray[0][1]; 返回值； , id : '订单', 文本：'订单'， 可排序：假， 数据索引：'订单'， 宽度：70， 固定：真的， 编辑： xtype：'文本字段' , 渲染器：函数（值，字段） 返回值； ], bbar : Ext.create('Ext.PagingToolbar', 商店：特性商店， 显示信息：真， 页面大小：我的页面大小， displayMsg : '显示 0 - 1 из 2', emptyMsg : "0 行" ), 停靠项目：[ xtype: '工具栏', 项目： [ 文本：'添加'， iconCls: '图标添加', 处理程序：函数（） var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns(); grid_colums[0].setEditor( xtype：'组合'， 存储：新的 Ext.data.ArrayStore( 字段：['id'，'name']， 数据：$特征 ), 显示字段：'名称'， 值字段：'id'， 模式：'本地'， 预输入：假， triggerAction: '全部', 惰性渲染：是的， emptyText : '选择动作' ); grid_colums[1].setEditor( xtype：'文本字段' ); // 空记录 //characteristicsStore.autoSync = false; featuresStore.insert(0, new CharacteristicModel()); rowEditing.startEdit(0, 0); //characteristicsStore.autoSync = true; , '-', itemId : '删除', 文本：'删除'， iconCls : '图标删除', 禁用：真， 处理程序：函数（） var selection = featuresGrid.getView().getSelectionModel().getSelection()[0]; 如果（选择） 特征Store.remove(选择); ] ], 插件：[行编辑] ); featuresGrid.getSelectionModel().on('selectionchange', function (selModel, selections) featuresGrid.down('#delete').setDisabled(selections.length === 0); ); ); Ext.onReady（函数（） Ext.define('AdvantagesModel', 扩展：'Ext.data.Model', 字段：[ 名称：'名称' ] ); // 设置状态提供者，所有状态信息将被保存到 cookie //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider')); var 优势存储 = 新的 Ext.data.Store( idProperty: 'AdvantagesModel', 代理 ： 模型：'AdvantagesModel'， 类型：“休息”， 接口： 阅读：admin_path + '/getAdvantages/1/', 创建：admin_path + '/saveAdvantages/1/', 销毁：admin_path + '/destroyAdvantages/1/' , 读者： 类型：'json'， 根：'数据'， 总属性：'总计数' , 作者： 类型：'json'， 根：'数据' , 缓冲：真 , 听众： 阅读：功能（响应） , 加载：函数（存储） , 写：函数（存储，操作） 存储.load(); , 页面大小：我的页面大小， 自动加载：开始：0，限制：myPageSize， 自动同步：真 ); var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); var 优势Grid = new Ext.grid.GridPanel( id : 'advantagesGrid', renderTo : 'advantages_grid_div_1', 商店：优势商店， 宽度：482， 身高：355， 有状态的：真， stateId : 'advantagesGrid', 标题：'网格 2'， iconCls : '图标用户', 听众： beforeedit：功能（dv，行，项目） //advantagesGrid.getView().refresh(); 如果（row.record.raw） 返回假； , 列 ： [ id : '名字', text : '优势', 可排序：假， 数据索引：'名称'， 宽度：480 ], bbar : Ext.create('Ext.PagingToolbar', 商店：优势商店， 显示信息：真， 页面大小：我的页面大小， displayMsg : '显示 0 - 1 из 2', emptyMsg : "0 行" ), 停靠项目：[ xtype: '工具栏', 项目： [ 文本：'添加'， iconCls: '图标添加', 处理程序：函数（） var grid_colums = rowEditing.cmp.getSelectionModel().view.getGridColumns(); grid_colums[0].setEditor( xtype：'组合'， 存储：新的 Ext.data.ArrayStore( 字段：['id'，'name']， 数据：$优势 ), 显示字段：'名称'， 值字段：'id'， 模式：'本地'， 预输入：假， triggerAction: '全部', 惰性渲染：是的， emptyText : '选择动作' ); // 空记录 优势Store.autoSync = false; 优势商店.插入（0，新优势模型（））； rowEditing.startEdit(0, 0); 优点Store.autoSync = true; , '-', itemId : '删除', 文本：'删除'， iconCls : '图标删除', 禁用：真， 处理程序：函数（） 变种选择 = 优势Grid.getView().getSelectionModel().getSelection()[0]; 如果（选择） 优点Store.remove(selection); ] ], 插件：[行编辑] ); 优势Grid.getSelectionModel().on('selectionchange', function (selModel, selections) 优势Grid.down('#delete').setDisabled(selections.length === 0); ); );

【问题讨论】：

您应该为不同的网格使用 Ext.grid.plugin.RowEditing 类的两个不同对象。

【参考方案1】：

如果您在同一页面上有两个可编辑的网格，则以不同方式标识两个网格 ID 列的替代方法是使用 Ext.grid.plugin.RowEditing 类的两个不同实例/对象。很多时候，拥有相同的 id 很重要。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing');

plugins    : [rowEditing]

plugins    : [rowEditing2]

【参考方案2】：

找到问题了。

columns    : [
        
            id       : 'name',

列 ID 必须不同，即使它们位于不同的网格中

【讨论】：

使用 itemId 代替 id。它由对象限定