修改EditorGridPanel让它支持Lookup效果

lidg

浏览: 5102 次

最近访客更多访客>>

knight_black_bob

woodding2008

5keit

YE_wolf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT

记得Dephi里有一个叫Lookup效果的Grid（不知道是不是这种叫法），就是如何在Grid中显示或编辑代码数据项，下面就是Ext的实现
希望对有这种需求的同学有所帮助。
一、重写Ext.grid.GridEditor让Editor控件获得Grid的当前行数据，代码如下，大家可以对照原来Ext.grid.GridEditor的源码

Ext.grid.GridEditor = function(field, config){
    Ext.grid.GridEditor.superclass.constructor.call(this, field, config);
    field.monitorTab = false;
};

Ext.extend(Ext.grid.GridEditor, Ext.Editor, {
    alignment: "tl-tl",
    autoSize: "width",
    hideEl : false,
    cls: "x-small-editor x-grid-editor",
    shim:false,
    shadow:false,
    //从Editor.js中拷贝过来
    startEdit : function(el, value){
        if(this.editing){
            this.completeEdit();
        }
        this.boundEl = Ext.get(el);
        var v = value !== undefined ? value : this.boundEl.dom.innerHTML;
        if(!this.rendered){
            this.render(this.parentEl || document.body);
        }
        if(this.fireEvent("beforestartedit", this, this.boundEl, v) === false){
            return;
        }
        this.startValue = v;
        this.field.record = this.record;//就加入这一行，让field中获得当前数据行
        this.field.setValue(v);
        this.doAutoSize();
        this.el.alignTo(this.boundEl, this.alignment);
        this.editing = true;
        this.show();
    }
});

二、继承Ext.form.ComboBox，让combo在设置值时把代码值写到Grid当前行的代码数据项中：

Ext.form.LookupComboBox = Ext.extend(Ext.form.ComboBox, {
setValue:function (v) {
	var text = v;
	var lookupValue;
	//增加的代码
	if (this.codeField) {
		var r = this.findRecord(this.displayField, v);
		if (r) {
			lookupValue = r.data[this.codeField];
		} else {
			if (this.valueNotFoundText !== undefined) {
				lookupValue = this.valueNotFoundText;
			}
		}
	}
	if (this.record&&lookupValue) {
		this.record.set(this.lookup, lookupValue);//把代码值写到Grid当前行数据中的代码项目字段
	}
	//增加的代码 --end
	this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = v;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
}});

三、使用:如下代码，附件有完整的例子，下载解压到ext的examples\grid文件夹中可以运行.

//查帐信息
var itemTypeStore = new Ext.data.SimpleStore({
        fields: ['code','name'],
        data : [['100','流动资产'],['101','固定资产']]
    });
var insureModeStore = new Ext.data.SimpleStore({
        fields: ['code','name'],
        data : [['100','账面原值'],['101','原值加成'],['102','账面余额'],['103','余额加成'],['104','清单'],['105','估价'],['106','账面净值'],['107','其他']]
 	});
var currencySystemStore = new Ext.data.SimpleStore({
        fields: ['code','name'],
        data : [['0110001','美元'],['0110002','英镑'],['0110003','港币'],['0110004','人民币']]	
 	}); 	    
   
var Plant = Ext.data.Record.create([
        {name:'id',type:'int'},
		{name:'surveyId',type:'int'},
		{name:'itemType',type:'string'},
		{name:'itemName',type:'string'},
		{name:'insureMode',type:'string'},
		{name:'currencySystem',type:'string'},
		{name:'insuredAmount',type:'float'},
		{name:'spotPrice',type:'float'},
		{name:'desc',type:'string'}
      ]); 
var auditReader = new Ext.data.JsonReader({
        idProperty:'id',
        fields: [
									{name:'id',type:'int'},
									{name:'surveyId',type:'int'},
										'itemType','itemName','insureMode','currencySystem','desc',
										'insureModeName','itemTypeName','currencySystemName',
									{name:'insuredAmount',type:'float'},
									{name:'spotPrice',type:'float'},
									{name:'inAccountTime',type:'date',format:'Y-m-d H:i'}
		]
    });         

var auditStore = new Ext.data.Store({
				data: xg.dummyData,
				reader: reader,
				remoteSort: true
			});        
var auditsm = new xg.RowNumberer();
var auditcm = new xg.ColumnModel([
		auditsm,
		{id:'id',hidden: true,dataIndex:'id',sortable: false},
		{header:'项目类型代码',hidden:true,dataIndex:'itemType',sortable: false},
		//下面是代码的lookup字段，
		{header: '项目类型', width: 100,dataIndex: 'itemTypeName',sortable: false,
		 renderer: function(v, params, record){
		 //根据项目类型字段的值找代码数据中它的应名称，并显示出来,就可以实现lookup效果了
			return findRecordValue(itemTypeStore,'code',record.data['itemType'],'name');
		}, 
		//加入LookupComboBox，实现lookup的编辑效果
		 editor: new Ext.form.LookupComboBox({
        			store: itemTypeStore,
        			codeField:'code',
        			displayField:'name',
        			lookup:'itemType',
        			typeAhead: true,
        			mode: 'local',
        			triggerAction: 'all',
        			emptyText:'--请选择--',
        			selectOnFocus:true
    			}) 
		 },
		{header: '项目名称', width: 100,dataIndex: 'itemName',sortable: false,
		 editor: new Ext.form.TextField({
                   allowBlank: false
                })
		},
		{header: '投保方式', width: 100,dataIndex: 'insureModeName',sortable: false,
		renderer: function(v, params, record){
			return findRecordValue(insureModeStore,'code',record.data['insureMode'],'name');
		},
		 editor: new Ext.form.LookupComboBox({
        			store: insureModeStore,
        			codeField:'code',
        			displayField:'name',
        			lookup:'insureMode',
        			typeAhead: true,
        			mode: 'local',
        			triggerAction: 'all',
        			emptyText:'--请选择--',
        			selectOnFocus:true
    			})
		},
		{header:'投保方式代码',hidden: true,dataIndex:'insureMode',sortable: false},
		{header: '投保时金额',renderer: Ext.util.Format.money,width: 100,dataIndex: 'insuredAmount',sortable: false,
		 editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    style: 'text-align:left'
                })
		},
		{header: '出险时金额',renderer: Ext.util.Format.money,width: 80,dataIndex:'spotPrice',sortable: false,
		 editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    style: 'text-align:left'
                })
		},
		{header:'项目币种代码',hidden:true,dataIndex:'currencySystem',sortable:false},
		{header: '项目币种', width: 60,dataIndex:'currencySystemName',sortable: false,
		renderer: function(v, params, record){
			return findRecordValue(currencySystemStore,'code',record.data['currencySystem'],'name');
		},
		 editor: new Ext.form.LookupComboBox({
        			store: currencySystemStore,
        			codeField:'code',
        			displayField:'name',
        			lookup:'currencySystem',
        			typeAhead: true,
        			mode: 'local',
        			triggerAction: 'all',
        			emptyText:'--请选择--',
        			selectOnFocus:true
    			})
		},
		{header: '入帐时间', width: 90,dataIndex:'inAccountTime',sortable: false,
		 renderer: Ext.util.Format.dateRenderer('Y-m-d H:i'),
		 editor: new Ext.form.DateField({format:'Y-m-d H:i',menu:new DatetimeMenu()})
		},
		{header:'说明',width:120,dataIndex:'desc',sortable: false,
		 editor:new Ext.form.TextArea()
		}
		]);
auditcm.defaultSortable = true;
var auditInfoGrid = new xg.EditorGridPanel({
	title:'查帐信息',
	iconCls:'icon-grid',
	store: auditStore,
    cm: auditcm,
    loadMask: true,
    bodyStyle:'width:100%',
    border:false,
    frame:true,
    clicksToEdit:1,
    renderTo: document.body,
    viewConfig: {forceFit:true},
        tbar:[{text:'增加',tooltip:'增加查帐信息',iconCls:'add',handler : function(){
        		var plan = new Plant({id:0,surveyId:20,itemType:'',itemName:'',insureMode:'',currencySystem:''});
        		auditStore.commitChanges();
        		var count = auditStore.getCount(); 
        		auditStore.insert(count,plan);
        		auditInfoGrid.startEditing(count, 0);
        		}
        	 }, 
        	'-', 
        	{text:'删除',tooltip:'删除查帐信息',iconCls:'remove',handler:function(){alert(Ext.util.Format.date(auditStore.getAt(0).data.inAccountTime,'Y-m-d H:i'));}}
        ]
});
auditStore.load();
Ext.grid.dummyData = [{id:1,surveyId:20,itemType:'100',itemName:'电脑设备',desc:'革命同志',insureMode:'100',currencySystem:'0110004',insuredAmount:1000.00,spotPrice:8900.00,inAccountTime:'Fri Aug 15 11:18:07 CST 2008'}];