`
zhaolicric
  • 浏览: 145921 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

Ext ColumnModel

阅读更多
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'}
         ])
    });
分享到:
评论

相关推荐

    Ext2.2动态生成ColumnModel

    NULL 博文链接:https://mogen9999.iteye.com/blog/262819

    Ext.grid.ColumnModel显示不正常

    Ext.grid.ColumnModel显示不正常

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    基于EXT2.0.2表格间数据拖拽

    在Grid中,我们可以通过配置ColumnModel来定义显示的列。 实现拖拽功能的关键在于扩展EXT的GridPanel类,添加DragDrop支持。这通常涉及以下几个步骤: 1. **初始化DragDrop**:为每个Grid创建一个DragSource和...

    EXT核心API详解

    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...

    EXTGrid属性方法

    - **reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)**: 重新配置数据存储器和列配置模型,通常用于动态改变表格的数据或列结构。 #### 三、Ext.grid.Column `Ext.grid.Column`代表了表格中的...

    Ext2.0示例讲解

    var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); cm.defaultSortable = ...

    ext超酷的grid中放图片(ext3.2.1)

    - 它由Store(数据存储)和ColumnModel(列模型)组成,Store负责管理数据,ColumnModel定义列的属性和布局。 2. **在Grid中添加自定义列** - 要在Grid中显示图片,我们需要创建一个自定义的列类型,这通常通过...

    ext 编程开发指南

    2. **定义列模型**:使用`Ext.grid.ColumnModel`指定每列的配置。 3. **创建Grid**:使用`Ext.grid.GridPanel`组件。 ```javascript // 创建数据存储 var store = new Ext.data.ArrayStore({ fields: ['name', '...

    ext表格布局小例子

    var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, { header: '', dataIndex: 'id', width: 40 }, { header: '', dataIndex: 'name', width: 80 }, { header: 'Ա', dataIndex: 'sex', ...

    ext学习资料ext学习资料

    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({...

    ext 读取xml 可编辑grid

    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 动态扩展

    `Ext.grid.ColumnModel` 是用于定义 `GridPanel` 列结构的类。在创建 `ColumnModel` 时,我们需要提供一个包含列信息的 JavaScript 数组。数组中的每个元素都是一个对象,该对象定义了列的属性,如 `header`(列头...

    ext js学习文档

    1. **定义列模型**:通过 `Ext.grid.ColumnModel` 创建 Grid 的列信息,指定每列的标题和数据索引。 ```javascript var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '名称',...

    Ext下拉树、下拉表格

    2. 定义表格列:使用Ext.grid.ColumnModel或者Ext.grid.column.Column定义列的配置,包括标题、宽度、数据绑定等。 3. 创建表格:使用Ext.grid.Panel或Ext.view.Table创建表格视图,并将其与数据源关联。 4. 配置...

    Ext Panel拼揍表格模板.rar

    Ext Panel是Ext JS框架中的一个核心组件,常用于构建复杂的用户界面,特别是在数据展示和交互方面。本资源“Ext Panel拼揍表格模板.rar”显然包含了关于如何使用Ext Panel创建自定义表格模板的示例和代码。 Ext JS...

    Ext grid合并单元格

    根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...

    EXT GridPanel获取某一单元格的值

    EXT GridPanel的列模型(ColumnModel)提供了此方法来映射列索引到数据字段名。 - `record.get(fieldName);` 使用Record对象的get方法,通过字段名获取单元格的值。`fieldName`变量包含了之前获取的列对应的字段名...

    ext学习文档

    - **步骤二列模型(ColumnModel)**: 介绍了如何定义Grid的列。 - **Grid组件的简易分页**: - 说明了如何为Grid组件添加分页功能。 - 使用`Ext.PagingToolbar`组件来实现分页。 #### 10. EXTMenu组件 - **创建...

Global site tag (gtag.js) - Google Analytics