`

Extjs中创建Store数据源的方式

阅读更多

Store简要说明请查看:http://extjs.org.cn/node/564

一.本地数据源

1.数组格式的数据:data只能是数组!——不能用JsonStore,否则报错!

var arrStore = new Ext.data.SimpleStore({
	data:[
		/*{id:1,name:"zs",age:22},
		{id:2,name:"ls",age:23},
		{id:3,name:"ww",age:24}*/注释掉的是json格式的,只能用JsonStore
		[1,"zs",22],
		[2,"ls",23],
		[3,"ww",24]
	],
	fields:["id","name","age"]
});

 

 

2.JSON格式的数据:data只能是json!——不能用SimpleStore,也不能用父类Store,否则报错!

var jsonStore = new Ext.data.JsonStore({
	data:[
		{id:1,name:"zs",age:22},
		{id:2,name:"ls",age:23},
		{id:3,name:"ww",age:24}
	],
	fields:["id","name","age"]
});

 

fields类型:

 

实例分析:

//1.设置数据源
var jsonStore = new Ext.data.JsonStore({
	data:[
		{id:1,name:"zs",age:22},
		{id:2,name:"ls",age:23},
		{id:3,name:"ww",age:24}
	],
	fields:["id","name","age"]
});

//2.定义列
var cm = new Ext.grid.ColumnModel({
	columns:[
		{
			header:"编号",
			dataIndex:"id",
			width:100,
			sortable:true
		},{
			header:"姓名",
			dataIndex:"name",
			width:100,
			sortable:true
		},{
			header:"年龄",
			dataIndex:"age",
			width:100,
			sortable:true
		}
	]
});



//4.创建表格面板
var grid = new Ext.grid.GridPanel({
	cm:cm,
	store:jsonStore,
	height:80,
	tbar:[
		{
			text:"增加项目",
			iconCls:"add",
			handler:function(){
				addWin.show();
			}
		},{
			text:"修改",
			iconCls:"edit"
		},{
			text:"删除",
			iconCls:"remove"
		}
	]
});


Ext.onReady(function(){
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	Ext.QuickTips.init();
	new Ext.Viewport({
		layout: 'fit',
		items: [grid]
	});
});

注意事项:

column中的dataIndex对应的就是fields中的字段

 

效果:



 

 

 

二.后台获取数据源

1.JsonStore:Ext.data.JsonStore ——只能用结合式的 url + root + fields 形式!!!

(注:API中只有结合式的写法,用proxy,reader分离式写法经测试无法解析数据!)

正确写法:

var epStore = new Ext.data.JsonStore({
	autoLoad: true,
	url:"getEProject.eva?doType=getEProject",
	root:"data",
	fields: ["project","company"]
});
错误写法:(此时,若将JsonStore换成其父类Store则可以正确解析!)
var epProxy = new Ext.data.HttpProxy({
	url:"getEProject.eva?doType=getEProject"
});

var epReader = new Ext.data.JsonReader({
	root:"data",
	fields: ["project","company"]
});

var epStore = new Ext.data.JsonStore({//此处若换成父类Store则解析正确
	autoLoad: true,
	proxy:epProxy,
	reader:epReader
});
 

 

2.Store:Ext.data.Store

方式一:结合式定义

var xmmcStore = new Ext.data.Store({
	proxy:	new Ext.data.HttpProxy({
				url:'getXmmc.eva?doType=getXmmc'
			}),
    /*注:此处用url代替proxy也是可以的,如下:
    url:'getXmmc.eva?doType=getXmmc',
    但是绝对不要用proxy:'getXmmc.eva?doType=getXmmc'这种形式!!!*/
    reader: new Ext.data.JsonReader({
    			root: 'data' 
    		},[
    			{ name: 'id' }, 
    			{ name: 'name'}
    		])
});

//此处也可将reader中的fields换简便方式定义,如下:
var xmmcStore = new Ext.data.Store({
	proxy:	new Ext.data.HttpProxy({
				url:'getXmmc.eva?doType=getXmmc'
			}),
    reader: new Ext.data.JsonReader(
    		{root: 'data'},
    		['id','name']
    )
});

//proxy换成url形式:
var xmmcStore = new Ext.data.Store({
    url:'getXmmc.eva?doType=getXmmc',
    reader: new Ext.data.JsonReader(
    		{root: 'data'},
    		['id','name']
    )
});
 

 

 方式二:分离式定义

var itemProxy = new Ext.data.HttpProxy({
	url:"getItem.eva?doType=getItem"
});
var itemReader = new Ext.data.JsonReader(
	{
		root:"data"
	},[
		{"name":"company"},
		{"name":"department"}
]);
var itemStore = new Ext.data.Store({
	proxy:itemProxy,
	reader:itemReader
});

此处也可将reader中的fields换简便方式定义,如下:
var itemReader = new Ext.data.JsonReader(
	{root:"data"},
	["company","department"]
);
 

方式三:带Record形式:

/**方式一:分离式 Proxy + Reader */

/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
	{name:"id",type:"int"},
	{name:"xmid",type:"int"},
	{name:"subject",type:"string"},
	{name:"planCost",type:"string"},
	{name:"actualCost",type:"string"}
]);
/*2.创建Proxy*/
var costProxy=new Ext.data.HttpProxy({
	url:'getProjectCost.eva?doType=getProjectCost',
	timeout:90000
}); 
/*3.创建Reader*/
var costReader = new Ext.data.JsonReader({
	root:"data"
},costRecord);
/*4.创建Store*/
var costStore = new Ext.data.Store({
	proxy:costProxy,
	reader: costReader 
});


/**方式二:结合式 Proxy + Reader */

/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
	{name:"id",type:"int"},
	{name:"xmid",type:"int"},
	{name:"subject",type:"string"},
	{name:"planCost",type:"string"},
	{name:"actualCost",type:"string"}
]);
/*2.创建Store*/
var costStore = new Ext.data.Store({
	proxy:new Ext.data.HttpProxy({
	        url:'getProjectCost.eva?doType=getProjectCost',
	        timeout:90000
        }),
	reader: new Ext.data.JsonReader({
		root:"data"
	},costRecord)
});


/**方式三:url + reader */

/*1.创建Record*/
var costRecord = new Ext.data.Record.create([
	{name:"id",type:"int"},
	{name:"xmid",type:"int"},
	{name:"subject",type:"string"},
	{name:"planCost",type:"string"},
	{name:"actualCost",type:"string"}
]);
/*2.创建Store*/
var costStore = new Ext.data.Store({
	url:"getProjectCost.eva?doType=getProjectCost",
	reader: new Ext.data.JsonReader({
		root:"data"
	},costRecord)
});


/**方式四:直接创建 JsonStore!*/————注意:这种方式只能用JsonStore,不能用父类Store
var costStore = new Ext.data.JsonStore({
	url:"getProjectCost.eva?doType=getProjectCost",
    root:"data",
    fields:["id","xmid","subject","planCost","actualCost"]
});

 注:url + root + fields的方式四,只能用JsonStore,不能用Store!!!

 

 

实例分析:

1.将方式一的Store放到下拉选中

2.在下拉选选中某项时加载方式二的Store

3.将加载后的数据放到文本框中显示出来

(1).创建下拉选,并监听选中事件,加载第二个store

var xmmcCombox = new Ext.form.ComboBox({
	fieldLabel:"项目名称",
	store:xmmcStore,
	displayField:"name",
	valueField:"id",
	triggerAction:"all",
	emptyText:"请选择",
	editable:false,
	listeners:{
		/*"expand":function(){
			xmmcStore.load();
		},*/
		"select":function(obj, record){
			itemStore.baseParams.xmid = record.get('id');
			itemStore.load();
		}
	}
});
 注:Store的传参赋值方式:store.baseParams.id/name/... = ......

 

(2).创建form表单:

var addForm = new Ext.FormPanel({
	frame: true,
	labelWidth: 80,
	//labelAlign: "right",
	//buttonAlign:"center",
	items:[
		xmmcCombox,
		{	
			name:"xmdw",
			xtype:"textfield",
			fieldLabel:"项目单位",
			readOnly:true,
			width:200
		},{
			name:"depart",
			xtype:"textfield",
			fieldLabel:"主管部门",
			readOnly:true,
			width:200
		}
	]
});
 

 

(3).将第二个Store加载后的数据放到文本框中:

itemStore.on('load', function (store, record, options) {
	var comp = record[0].get("company");
	var dept = record[0].data.department;
	addForm.getForm().findField("xmdw").setValue(comp);
	addForm.getForm().findField("depart").setValue(dept);
});
注意事项:

1.文本框赋值方式:

getForm().findField("").setValue("")
2.在Store中取record:
(1).取总记录recordsstore.data  (注,此时若要取某下标记录,还得用records.get(i))
(2).取指定下标的record:store.getAt(i)  (注:不是get(i)或者getById(i))
2.在record中取值方式:
(1).record.data.name
(2).record.data["name"]
(3).record.get("name")   (注意:这里比前两种少了data)
分析:record是一个数组,所以取值要用get,而record.data已经是一个对象了,所以可以直接用“.”
详情请参照:http://blog.csdn.net/liu78778/article/details/3942990
 

后台返回数据如下:

xmmcStore:

data: [{id:4, name:百年老字手工豆腐火锅}, {id:5, name:光伏节能减排照明系统}]

itemStore:

data: [{department:商贸局 农业局 , company:一号企业}]
 注意事项:

1.返回的数据中的data即定义的JsonReader中的root

2.返回的数据的data后面必须是json数据的数组!就算只有一条数据也得用数组形式返回。

3.文本框不可编辑方式有2种:readOnly:truedisable:true
(注:Combobox有3种:readOnly、disable、editable)
4.要显示非文本框样式,则加上一句:style:'background:none;border:0px;',
{	
	name:"xmdw",
	xtype:"textfield",
	fieldLabel:"项目单位",
	readOnly:true,
	style:'background:none;border:0px;',
	width:200
},{
	name:"depart",
	xtype:"textfield",
	fieldLabel:"主管部门",
	readOnly:true,
	style:'background:none;border:0px;',
	width:200
}
 
效果如下:

 

 

 

 

 
 
  • 大小: 1.7 KB
  • 大小: 2.9 KB
  • 大小: 2.4 KB
  • 大小: 4.4 KB
  • 大小: 1.6 KB
  • 大小: 2.1 KB
分享到:
评论
2 楼 辉煌之至 2015-08-06  
我都给虐了一星期的问题在你这里给解决了
1 楼 辉煌之至 2015-08-06  
楼主,你的帖子非常好 !我是最近新学extjs的,问题诸多啊。

相关推荐

    extjs4 对各类型store各种数据的读取 model 前台 等等

    ExtJS框架支持多种方式将Store中的数据绑定到界面上。常见的绑定方式包括: - **Grid Panel**: 通过Grid Panel组件可以方便地显示表格数据。 - **Form Panel**: 可以用来编辑或显示模型的字段。 - **List**: 显示...

    storebar extjs通过store实现toolbar

    1. 创建`Store`:定义一个`Store`实例,配置数据源(如URL)、数据模型(`Model`)以及数据加载的相关参数。 ```javascript var myStore = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: '...

    Extjs之旅-combox之远程加载数据

    Store是ExtJS中管理数据的容器,它可以连接到各种数据源,包括本地数据、JSON、XML等,或者通过Ajax请求从服务器获取数据。在Combox中,我们通常会配置一个与服务器交互的Store,并设置它的proxy属性为AjaxSource,...

    extjs最简单的数据绑定和修改

    ExtJS的数据绑定使得UI组件可以直接与数据存储关联,当数据源发生变化时,UI会自动更新。例如,一个`Ext.form.Panel`可以通过`bind`配置项与Store绑定,如`{fieldLabel: 'Name', xtype: 'textfield', bind: '{user....

    extjs中文文档大全

    此外,利用Data Binding功能,可以实现组件和数据源之间的实时同步,大大简化了数据更新的操作。 总而言之,这三份文档为开发者提供了一个全面的ExtJS学习资源库,无论你是初学者还是经验丰富的开发者,都能从中...

    Extjs4下的STOREMENU

    Store是ExtJS中用于管理数据的核心组件,它可以连接到各种数据源,如JSON、XML或远程服务器,并负责加载、处理和缓存数据。在STOREMENU中,Store通常用来存储菜单项的相关信息,如标题、链接或者图标等。 “Menu”...

    ExtJs3.1目前所有例子源代码

    - **Store**:Store是数据管理的核心,它可以连接到各种数据源,如JSON、XML或Ajax请求,负责加载、存储和更新数据。 - **Proxy**:Store通过Proxy与数据源交互,支持远程和本地数据操作。 - **Model**:定义数据...

    ssh+extjs4.0grid删除数据

    1. **创建Grid**:配置Grid,包括列模型(ColumnModel)、数据源(Store)以及视图配置。数据源应指向SSH后台的一个RESTful服务接口。 2. **定义删除行为**:为Grid添加一个删除按钮或右键菜单,绑定删除操作。在...

    ExtJS 使用grid显示数据

    2. **数据存储(Store)**:管理数据集,它可以是本地数据或远程数据,如`Ext.data.Store`,配置数据源、proxy(代理)用于与服务器通信,例如JSONP或Ajax。 3. **列模型(Column Model)**:定义Grid的列布局,`...

    ExtJs4 进销存 源代码

    3. **Store和Proxy**:Store用于存储数据,Proxy负责与服务器进行数据交换,可能采用Ajax或Direct方式与后端通信。 4. **模型(Model)和元数据(Metadata)**:定义数据结构和验证规则,便于数据处理。 5. **控制...

    基于ExtJS技术实现的DataGrid 动态数据绑定检索例子程序代码

    在DataGrid组件中,动态数据绑定是指将表格的数据源与服务器上的数据实时连接,当数据发生变化时,DataGrid会自动更新显示。这种特性在处理大量或频繁更新的数据时非常有用,因为它减少了不必要的页面刷新,提高了...

    EXTJS产品级别管理后台源代码

    2. **数据存储与远程通信**:EXTJS的`Ext.data.Store`类负责管理数据,它可以连接到各种数据源,如JSON、XML或Ajax接口。在产品级别管理中,通常会有一个专门的Store用于获取、更新和保存产品级别的数据。同时,...

    Extjs treeGrid 本地数据 例子

    总结起来,这个“Extjs treeGrid 本地数据 例子”主要展示了如何使用ExtJS创建一个基于本地数据的TreeGrid,包括设置数据源、定义数据模型、构建TreeGrid面板以及处理交互事件。通过学习这个例子,你可以掌握在Web...

    Inter(extjs 的案例源代码)源代码

    7. **数据存储**:ExtJS的数据存储(Store)组件负责管理数据集,它可以与各种数据源(如JSON、XML、CSV等)交互,并提供排序、过滤、分页等功能。 8. **Ajax请求**:在与服务器通信时,ExtJS通常使用Ajax请求来...

    extjsDemo(store grid form mvc模式等一些demo)

    在"extDemo"中,你可能会看到如何定义一个Store,配置它的模型(Model)以及数据源,以及如何监听数据变更事件。 接下来是"grid"。Grid是ExtJS中最常用的组件之一,用于显示二维数据,通常与Store配合使用。在"ext...

    使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能!

    在ExtJS4中,我们首先需要创建一个Grid配置对象,定义列模型、数据源、以及任何自定义的行为。 例如,创建一个Grid的基本结构可能如下: ```javascript Ext.application({ name: 'MyApp', launch: function () {...

    extjs3.3 中文文档

    数据绑定允许组件与后端数据源进行实时同步。 2. **类系统**:EXTJS采用面向对象的方式组织代码,其类系统是基于Ext.Base构建的。了解类系统有助于理解EXTJS如何扩展JavaScript对象并实现复用。 3. **组件库**:...

Global site tag (gtag.js) - Google Analytics