ExtJS学习04Store
2014-06-10 08:58
267 查看
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方法加载。
类结构
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); }); }) })();
相关文章推荐
- Extjs学习总结之04消息框
- Extjs学习 数据处理Proxy 、Reader 、Store
- ExtJs学习笔记04
- 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
- Extjs学习 Store的用法
- Extjs学习笔记——Ext.data.JsonStore使用说明
- 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
- ExtJs学习笔记13 - ComboBox,Store
- extjs学习04——extjs的初级UI设计1
- 学习Extjs与RoR的集成有感
- 学习Extjs与RoR的集成有感
- 学习Extjs与RoR的集成有感
- eXTJS学习笔记
- extjs 学习资源
- 学习Extjs与RoR的集成有感
- 老友记台词学习笔记 SE01EP04(一)
- 学习Extjs与RoR的集成有感
- 学习Extjs与RoR的集成有感
- 学习Extjs与RoR的集成有感
- NetTiers学习笔记04---NetTiers模板中各个选项的一些解释