var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true //所有的列都是排序的
},
columns: [ new Ext.grid.RowNumberer(),//自动编号
{
id: 'code',
header: '物料编号',
dataIndex: 'code',
width: 200,
editor: new fm.ComboBox({//选择下拉框
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
listClass: 'x-combo-list-small',
store:dsSupplier,
valueField:'goodsId',
displayField:'code',
listeners:{
select: function(){
var gridrerCordValue = grid.getSelectionModel().getSelected();
var selectCode=this.getRawValue();
gridrerCordValue.set('goodsId', this.getValue());//this.getValue()取到的是select框的隐藏值
Ext.Ajax.request({
url:getRootPath()+'XXXServlet?selectCode='+selectCode,
timeout:'60000',
method:'POST',
success:function(response){
var respText = Ext.util.JSON.decode(response.responseText);
gridrerCordValue.set('style', respText.style);
gridrerCordValue.set('shortName', respText.shortName);
gridrerCordValue.set('unitName', respText.unitName);
},
failure: function(resp,opts) {
var respText = Ext.util.JSON.decode(resp.responseText);
Ext.Msg.alert('错误', respText.error);
}
});
}
}
}),
renderer: function(value,metadata,record){//初始值,隐藏值和显示值
var index = dsSupplier.find('goodsId',value);
if(index!=-1){
return dsSupplier.getAt(index).data.code;
}
return record.get('code');
}
}, {
header: '物料简称',
dataIndex: 'shortName',
width: 130,
editor: new fm.TextField({//编辑框列
allowBlank: false
})
}, {
header: '规格型号',
dataIndex: 'style',
width: 130,
hidden:true//隐藏列
}
]
})
这是构造了三个ColumnModel,
看了几周的Ext,觉得还是很不错的哦。。。
store中的数据源
var dsSupplier = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:getRootPath()+'XXXServlet?change=sgoodsCode'
}),
reader: new Ext.data.JsonReader({
root: 'gridRows',
totalProperty: 'totalCount'
}, [
{name: 'code', mapping: 'code'},
{name: 'goodsId', mapping: 'goodsId'}
])
});
分享到:
相关推荐
NULL 博文链接:https://mogen9999.iteye.com/blog/262819
Ext.grid.ColumnModel显示不正常
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
在Grid中,我们可以通过配置ColumnModel来定义显示的列。 实现拖拽功能的关键在于扩展EXT的GridPanel类,添加DragDrop支持。这通常涉及以下几个步骤: 1. **初始化DragDrop**:为每个Grid创建一个DragSource和...
69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74...
- **reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)**: 重新配置数据存储器和列配置模型,通常用于动态改变表格的数据或列结构。 #### 三、Ext.grid.Column `Ext.grid.Column`代表了表格中的...
var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = ...
- 它由Store(数据存储)和ColumnModel(列模型)组成,Store负责管理数据,ColumnModel定义列的属性和布局。 2. **在Grid中添加自定义列** - 要在Grid中显示图片,我们需要创建一个自定义的列类型,这通常通过...
2. **定义列模型**:使用`Ext.grid.ColumnModel`指定每列的配置。 3. **创建Grid**:使用`Ext.grid.GridPanel`组件。 ```javascript // 创建数据存储 var store = new Ext.data.ArrayStore({ fields: ['name', '...
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, { header: '', dataIndex: 'id', width: 40 }, { header: '', dataIndex: 'name', width: 80 }, { header: 'Ա', dataIndex: 'sex', ...
var cm = new Ext.grid.ColumnModel([{header: '编 号', dataIndex: 'userId'}, ...]); var store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data), ...}); var grid = new Ext.grid.GridPanel({...
cm: new Ext.grid.ColumnModel([ {header: 'Field 1', dataIndex: 'field1', editor: new Ext.form.TextField()}, {header: 'Field 2', dataIndex: 'field2', editor: new Ext.form.TextField()} ]), width: ...
`Ext.grid.ColumnModel` 是用于定义 `GridPanel` 列结构的类。在创建 `ColumnModel` 时,我们需要提供一个包含列信息的 JavaScript 数组。数组中的每个元素都是一个对象,该对象定义了列的属性,如 `header`(列头...
1. **定义列模型**:通过 `Ext.grid.ColumnModel` 创建 Grid 的列信息,指定每列的标题和数据索引。 ```javascript var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '名称',...
2. 定义表格列:使用Ext.grid.ColumnModel或者Ext.grid.column.Column定义列的配置,包括标题、宽度、数据绑定等。 3. 创建表格:使用Ext.grid.Panel或Ext.view.Table创建表格视图,并将其与数据源关联。 4. 配置...
Ext Panel是Ext JS框架中的一个核心组件,常用于构建复杂的用户界面,特别是在数据展示和交互方面。本资源“Ext Panel拼揍表格模板.rar”显然包含了关于如何使用Ext Panel创建自定义表格模板的示例和代码。 Ext JS...
根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...
EXT GridPanel的列模型(ColumnModel)提供了此方法来映射列索引到数据字段名。 - `record.get(fieldName);` 使用Record对象的get方法,通过字段名获取单元格的值。`fieldName`变量包含了之前获取的列对应的字段名...
- **步骤二列模型(ColumnModel)**: 介绍了如何定义Grid的列。 - **Grid组件的简易分页**: - 说明了如何为Grid组件添加分页功能。 - 使用`Ext.PagingToolbar`组件来实现分页。 #### 10. EXTMenu组件 - **创建...