ExtJS 实现本地数据的编辑和筛选

附上代码

//集成本地修改,筛选
MoneyGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
	typeCmb:null,
	constructor:function(){
		this.typeCmb = new Ext.form.ComboBox({
			triggerAction:"all",
			mode:"local",
			displayField:"type",
			value:"全部",
			store:new Ext.data.SimpleStore({
				data:["收入","支出","全部"],
				expandData:true,
				fields:["type"]
			}),
			listeners:{
				select:{
					fn:this.onViewTypeSelect,
					scope:this
				}
			}
		});
		MoneyGridPanel.superclass.constructor.call(this,{
			renderTo:Ext.getBody(),
			width:400,
			height:300,
			tbar:[
				{
					text:"保存",
					handler:this.saveButtonClick,
					scope:this
				},"-",
				"查看方式",
				this.typeCmb
			],
			store:new Ext.data.SimpleStore({
				data:[["收入",250],["支出",50],["收入",350],["收入",50]],
				fields:["type",{name:"money",type:"int"}]
			}),
			columns:[
				{
					header:"类型",
					dataIndex:"type",
					editor:new Ext.form.ComboBox({
						triggerAction:"all",
						mode:"local",
						displayField:"type",
						store:new Ext.data.SimpleStore({
							data:["收入","支出"],
							expandData:true,
							fields:["type"]
						})
					})
				},
				{
					header:"金额",
					dataIndex:"money",
					editor:new Ext.form.NumberField({
						maxValue:10000,
						minValue:1
					})
				}
			]
		});
	},//end of constructor
	onViewTypeSelect:function(_combo){
		var _type = _combo.getValue();
		if(_type == "全部")
		{
			this.getStore().clearFilter();//清除筛选
		}
		else
		{
			this.getStore().filter("type",_type);//筛选
		}
	},
	saveButtonClick:function(){
		//var _store = this.getStore();
		this.getStore().commitChanges();
		
		this.onViewTypeSelect(this.typeCmb);//提交更改后重新绑定数据
		
	}
});

知识共享许可协议
《ExtJS 实现本地数据的编辑和筛选》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     174.68ms