Ext ColumnModel

最新推荐文章于 2021-01-14 01:53:18 发布

原创最新推荐文章于 2021-01-14 01:53:18 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #json #Ajax

ExtJS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用 ExtJS 构建 Grid 组件，包括 ColumnModel 的配置方法、如何实现自动编号、如何设置列的排序功能以及如何通过 Ajax 请求动态更新数据等。此外还展示了如何使用 ComboBox 和 TextField 实现单元格的编辑功能。

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'}
         ])
    });