EXTJS TREE的应用以及data.store的作用

EXTJS TREE是EXTJS的重要组件之一。

 A TreePanel must be bound to a Ext.data.TreeStore.

ExtJS中的数据处理

ExtJs中的数据处理主要通过三个类来实现
* 数据代理类：Ext.data.DataProxy   ----作用：获取数据，一般使用其子类Ext.data.MemoryProxy,Ext.data.HttpProxy,Ext.data.ScriptTagProxy
* 数据读取器类：Ext.data.Reader    ----作用：解析Proxy中的数据，一般使用其子类Ext.data.ArrayReader,Ext.data.jsonReader,Ext.data.XmlReader
* 数据存储类：Ext.data.Store    ----作用：存储解析好的数据供数据展现组件使用,如：Ext.form.ComboBox,Ext.grid.GridPanel

一.Ext.data.DataProxy的子类
1 数据来源于内存(本地)  使用Ext.data.MemoryProxy来定义
2 数据来源于同一域的远程服务器(同域远程) 使用Ext.data.HttpProxy定义
3 数据来源于不同域的远程服务器 使用Ext.data.ScriptTagProxy

一般而言，这三种数据代理类已经够了，但是你还是可以继承Ext.data.DataProxy类做一个自定义数据代理类(扯远了)

二.Ext.data.DataReader的子类
1  数据源格式为数组使用:Ext.data.ArrayReader
2  数据源格式为json使用:Ext.data.jsonReader
3  数据源格式为xml使用:Ext.data.XmlReader

 

三.Ext.data.Store
通过一，二配置好Ext.data.DataProxy(3个子类)和Ext.data.DataReader(3个子类)后将其配置到Store中即可：例
var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true
})

 

 

四.将Store放入Gridpanle或组件中即可为组件提供数据

 

五.举例
1 创建一个MemoryProxy
   var cities = [
[1,"北京市"],
[2,"天津市"],
[3,"上海市"]
   ]

 

   var proxy = new Ext.data.MemoryProxy(cities);

 

2 创建一个DataReader
  每个数据项都是一个Ext.Data.Record对象，它的列信息(即数据结构)是通过Ext.data.Record定义
   var City = Ext.data.Record.create({
{name:"cid",type:"int",mapping:0},
{name:"cname",type:"String",mapping:1}
   });

 

   var reader = new Ext.data.ArrayReader({}，City);

 

3 组装Store
var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true //即时加载数据，默认为false不加载需要调用load()方法才能加载
});

 

4 使用Store
有了store，把它填充到ComboBox或GridPanel即可

 

来个例子：
var combobox = new Ext.form.ComboBox({
renderTo:Ext.getBody(), //渲染目标
triggerAction:"all", //是否开启自动查询
store:store,
displayField:"cname",
valueField:"cid",
mode:"local",  //数据模式 remote/local
emptyText:"请选择城市" //无任何选择时的显示文字
})

 

两个重要方法
combobox.getValue(); //获得值
combobox.getRawValue(); //获得文本值

 

 

5 总结
看完整的例子
Ext.onReady(function(){
// 1. 定义一个MemoryProxy
var cities = [
  [1,"北京"],
  [2,"上海"],
  [3,"天津"]
];
var proxy = new Ext.data.MemoryProxy(cities);

// 2. 定义一个DataReader
//注意此时配置type时string数据类型为小写
var City = Ext.data.Record.create([
  {name:"cid",type:"int",mapping:0},
  {name:"cname",type:"string",mapping:1}
]);
//var reader = new Ext.data.ArrayReader({},City);

var reader = new Ext.data.ArrayReader({},City);

 

// 3. 定义一个Ext.data.Store
var store = new Ext.data.Store({
  proxy:proxy,
  reader:reader,
  autoLoad:true
});

//加载数据若为数组的话可简写为
var simplestore = new Ext.data.SimpleStore({
  fields: ['cid', 'cname'],
        data : cities // from states.js
});
//alert('City:'+Ext.encode(City));
store.load();

// 4. 在combox中使用store
var comBox = new Ext.form.ComboBox({
  store:store,
  displayField:"cname",
  valueField:"cid",
  mode:"local",   //local/remote
  emptyText:"请选择城市",
  triggerAction:"all", //all/query 设置是否输入时是否触发查询数据
  renderTo:Ext.getBody()
});

var comBox1 = new Ext.form.ComboBox({
  store:simplestore,
  displayField:"cname",
  valueField:"cid",
  mode:"local",   //local/remote
  emptyText:"请选择城市",
  triggerAction:"all", //all/query 设置是否输入时是否触发查询数据
  renderTo:"test"
});
})