ExtJS学习04Store_pop extjs-优快云博客

本文链接：https://blog.youkuaiyun.com/ItJavawfc/article/details/29797549

本文介绍了ExtJS中的Store组件，详细解释了如何使用Store为GridPanel和ComboBox等组件提供数据。文章通过实例展示了如何配置Store，包括自动加载数据、定义模型和字段、使用不同类型的代理进行数据交互，并演示了如何对数据进行过滤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

store是一个存储数据对象Model的集合缓存,他可以为extjs的可视化组建提供数据(GridPanel,ComboBox)等
类结构
Ext.data.AbstractStore
   Ext.data.Store 没有特殊情况这个类就可以满足日常的开发了
       Ext.data.ArrayStore
       Ext.data.DirectStore
       Ext.data.ArrayStore 内置辅助的类
       Ext.data.JsonStroe       内置辅助的类
   Ext.data.TreeStore



Ext.data.Store 使用
   参数
      autoLoad(Boolean/Object) : 自动加载数据,自动调用load
      data(Array) : 内置数据对象的数组,初始化的是就要被装在
      model(Model): 数据集合相关的模型
      fields(Field):字段的集合,程序会自动生成对于的Model
   方法
      each( Function f, [Object scope] ) : void 变量数据中的Model

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

例子小程序1：

(function(){
	 Ext.Loader.setConfig({              //启用Ext.Loader
		 enabled:true,
	 });
	 
	 Ext.onReady(function(){
		 Ext.define("person",{               //创建一个类
			 extend:'Ext.data.Model',
			 fields:[
			         {name:'name'},
			         {name:'age'}
			         ],
			         proxy:{       //内存代理
			        	 type:'memory'
			         }
		 })		 
		 var s=new Ext.data.Store({         //创建store
			 
			 data:[                         //data属性，创建数据
			       {name:'uspcat.com',age:1},
			       {name:'yfc',age:26},
			       ], 
			       model:'person',          //model属性，指定和person类相关联
			       autoLoad:true            //自动加载
		 });
		 
		 s.each(function(model){
			 alert(model.get('name'));
		 }); 
	 })
	
})();

例子小程序2：不要模型类，直接在Store中创建字段即可

(function(){
	 Ext.Loader.setConfig({              //启用Ext.Loader
		 enabled:true,
	 });
	 
	 Ext.onReady(function(){
		 Ext.define("person",{               //创建一个类
			 extend:'Ext.data.Model',
			 fields:[
			         {name:'name'},
			         {name:'age'}
			         ],
			         proxy:{       //内存代理
			        	 type:'memory'
			         }
		 })		 
		 var s=new Ext.data.Store({         //创建store
			 
			 data:[                         //data属性，创建数据
			       {name:'uspcat.com',age:1},
			       {name:'yfc',age:26},
			       ], 
			       model:'person',          //model属性，指定和person类相关联
			       autoLoad:true            //自动加载
		 });
		 
		 s.each(function(model){
			 alert(model.get('name'));
		 }); 
	 })
	
})();
 

<span style="font-size:14px;"><strong>例子小程序3：</strong></span>
用一个代理类：替代类来传递数值

(function(){
	 Ext.Loader.setConfig({              //启用Ext。Loader
		 enabled:true,
	 });
	 Ext.onReady(function(){
		 var s=new Ext.data.Store({         //创建store
			fields:[
			        {name:'name'},
			        {name:'age'}
			        ],
			       proxy:{            //通过代理传递参数
			    	   type:'ajax',
			    	   url:'person.jsp'
			       },
			       model:'person',          //model属性，指定和person类相关联
			    //   autoLoad:true            //自动加载
			       
		 });
		 s.load(function(records,operation,success){
			 Ext.Array.each(records,function(model){
				 alert(model.get('name'));
				 
			 });
		 });
	 })
	
})();
//总结：当用内存代理时，我们用autoLoad:true 自动加载
//当用ajax传递数据的时候，需要用load方法加载。

<span style="font-size:14px;"><strong>例子小程序4：</strong></span>

filter的用法：
(function(){
	 Ext.Loader.setConfig({              //启用Ext。Loader
		 enabled:true,
	 });
	 Ext.onReady(function(){
		 var s=new Ext.data.Store({         //创建store
			fields:[
			        {name:'name'},
			        {name:'age'}
			        ],
			       proxy:{            //通过代理传递参数
			    	   type:'ajax',
			    	   url:'person.jsp'
			       },
			       model:'person',          //model属性，指定和person类相关联
			       
		 });
		 s.load(function(records,operation,success){
			 Ext.Array.each(records,function(model){
			 });
			 s.filter('name',"yfc");          //过滤
			 s.each(function(model){
				 alert(model.get('name'));
			 });
			 
			 var index=s.find('name','uspcat\.com',0,false,true,false);
			 alert(index);

		 });
	 })
	
})();