ExtJs 入门教程十三[储存:Store]

一、语法

1、Store

	data:由数组构成,负责提供数据(非必需)
	fields:由Store中的字段构成、及与原始数据对应方式(非必需)
	reader:将源数据转换成Record对象(JsonStore、XmlStore、ArrayStore)
	new Ext.data.Store({
		url : 'default/common!find.action',
		remoteSort:true,//排序问题,见说明[1]
		baseParams:{	
			'params.cls':'com.tft.pojo.sys.RealNameParams',//返回类型对象
			'params.printTitle':'商户对账密钥配置',
			'cp[0].name':'cityCode',//cp在commonAction中定义的数组
			'cp[0].res':'=s',
			'cp[0].text':'所属城市',
			'cp[0].order':'desc',
			'cp[0].value':Ext.getCmp("fwzParam_city").getRawValue()
		},
		reader : new Ext.data.JsonReader({},[{},{}])
	});
	new Ext.data.Store({
		proxy:new Ext.data.HttpProxy({url:'default/csshjczl!findShs.action'}),	
		reader:new Ext.data.JsonReader({},[])	
	});

2、JsonStore
JsonStore({
	root:根据root参数提供的属性名称去获取数据源中的数据
	TotalProperty:数据源中保存数据总数的属性名
	IdProperty:数据源中可作为记录唯一标记的字段名,无设置将自动产生唯一标
	},[
	{name:'uid',type:'int',mapping:'id'},这里为Record记录
});

new Ext.data.SimpleStore({
	fields:['mer_statusSelID','mer_statusSelName'],
	data:[['1','有效'],['0','无效']]
})
3、XmlStore

XmlStore({
	TotalProperty:'results',
	Record:'row',
	id:'id'
	},[{},{与JsonStore相同}]
});
4、ArrayStore
ArrayStore({
	idIndex:0
	},[{name:'id',type:'int',mapping:0},
	{如果Record是数组按顺序读取可不用设置Mapping}
});

二、Store与Proxy的使用

store.proxy= new Ext.data.HttpProxy({url: 'default/cscsglcs!findFwzs.action?params.csdmz=' + combo.value});
store.load({params : {start : 0,limit :15}});//分页 

三、Store加载数据的4种方式

	1、autoLoader:true 在定义Store时,配置Autoloader:在创建Store时自动调用Load方法加载数据;
	2、autoLoader:{page:1} 在定义Store时,配置Autoloader:{page:1}在调用load方法时作为参数传递给load方法
	3、对象.load(); 在创建Store后,执行Load方法。该方法一般用于加载远程数据
		对象.loadData(datas);  加载本地数据
		对象.loadData(datas,true); 追加方式
	4、带提交参数、回调函数以及追加数据
		对象.load({
			Params:{Page:1},
			callback:function(r,opts,success){//处理过程},
			scope:this,
			add:true//加载数据后不清空原有数据,将新数据追加到原有数据里
		});
四、Store数据操作
	var data = { id: 1001,name: '张三' };
	var p = new store.recordType(data,data.id);
	var data2 = { id:1002,name: '李四' };
	var p2 = new store.recordType(data2,data2.id);
	1、添加
		1、insert方法  在指定位置开始插入记录,一次可以插入多条记录;
			store.insert(2,p);   //在第一条记录后插入
			store.insert(0,[p1,p2]);
		2、add方法  直接增加一条或多条记录;
			store.add(p);
			store.add([p1,p2]);
		3、addSorted方法  在排序后的位置插入记录,该方法一次只能插入一条记录
			store.addSorted(p);
		4、loadData方法  指定第2个参数为true,不然会清空原有数据再追加数据
			store.loadData(p,true);
			store.loadData([p1,p2], true);
	2、删除
		1、remove方法  store.remove(rec);  //rec为一个记录
		2、removeAll方法  store.removeAll();  //删除所有记录
		3、removeAt方法  store.removeAt(10); //10为索引值

五、说明

1、排序

A。一种是默认的客户端排序机制,对当前页进行排序。sortable
   这种排序模式不用多说,是人都会:
     1.可以在Ext.grid.ColumnModel列模式中,设置sortable:false,此列为可排序。
      var cm = new Ext.grid.ColumnModel([//定义列显示模式
         {id: "name",header: "部门名称",dataIndex: 'name',width: 50, sortable:false},           
      ]);
     2.总体设置Ext.grid.ColumnModel的所有列的默认排序方式。
       cm.defaultSortable = true;//默认列全部可排序     
       cm.setDefaultSort('name', 'DESC');也可如:按名字倒序
B。进行服务器端全局排序方式。remoteSort
   这种排序方式,大家都知道,但是不一定能用好,需要一下几个步骤,少一个都不行。
   1.数据集Ext.data.Store中设置参数:remoteSort: true
   2.列模式Ext.grid.ColumnModel中需要进行全局排序的列中加入参数:remoteSort: true
   3.后台组合数据集的方法中,
    通过:String sort= request.getParameter("sort");//要排序的列名--无需定义,ext自动后传
          String dir= request.getParameter("dir");//要排序的方式--无需定义,ext自动后传
    取数据集的时候,把这两个参数加进去,就爽了。
这时候到前台试试,看看是不是就可以进行全局排序了。


下面是服务器端排序的具体补充:

首先获取这两个值:
String sort= request.getParameter("sort");//要排序的列名--无需定义,ext自动后传
String dir= request.getParameter("dir");//要排序的方式--无需定义,ext自动后传
其中sort对应数据库中的某个字段
dir表示为asc或desc即升序或降序
sql语句就是普通的语句:
select * from user where id>50 order by sort dir


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值