EXTJS4.2数据源配置及创建注意事项

陷阱一：TreeStore

1、TreeStore在API文档中使用的是Ext.data.NodeInterface类作为Model原型，其中children属性存储的是子节点，但是在创建TreeStore时如下代码中指定了root节点不为children时，子节点数据需要存储在root节点

Ext.define('MyApp.store.MenuStore', {       	    //定义一个树形的数据源
    extend: 'Ext.data.TreeStore',                   //继承自Ext.data.TreeStore
    model: 'MyApp.model.NodeInterface',             //指定Model为“MyApp.model.NodeInterface”在本项目中树的数据源统一采用本Model
    proxy: {                                        //请求代理设置
        type: 'ajax',                               //请求类型为AJAX
        url: '/GetMenuTree',      		    //请求URL地址
        reader: {                                   //配置数据嵌套
            type: 'json',                           //配置数据类型为JSON
            root: 'Data'                            //数据根节点为Data
        }
    },
    root: {                                         //设置根节点属性
        text: '我是根节点',                         //显示值
        id: '',                                     //value值
        expanded: true                              //默认展开
    },
    autoLoad: true                                  //自动加载
});

2、 TreeStore会使用默认的Ext.data.NodeInterface类作为Model原型但是该原型没有对应存储自定义属性的地方所以我进行扩展了一个自定义属性 attributes自定义属性，该属性可以存储成对象，之所以没有写checked属性是因为只要有checked属性树就会显示复选框，经测试单返回的数据中存在checked属性同样也能够实现选中的情况，经省一部研究发现在treeStore指定model后会自动添加一下属性

Ext.define('MyApp.model.NodeInterface', {     //定义一个Model，该Model用于该应用程序的树形结构接收对象
    extend: 'Ext.data.Model',                 //继承自Ext.data.Model
    fields: [                                 //定义该Model的字段
        'id', 'text', 'parentId', 'index', 'depth', 'expanded', 'expandable',        //'checked',
        'leaf', 'cls', 'iconCls', 'icon', 'root', 'isLast', 'isFirst', 'allowDrop', 'allowDrag', 'loaded', 'loading', 'href', 'hrefTarget', 'qtip', 'qtitle',
         'attributes', 'Data'
    ]
});

3、但需要取值时可以使用以上方式取值

function (view, record, item, index, e, eOpts) {                                 //菜单树节点的单击事件
        var id = record.get('id');                                                              //获取当前节点绑定的数据的id字段
        var controller = record.get('attributes').Controller;                                   //获取当前节点绑定的数据的Controller字段
        var viewXtype = record.get('attributes').ViewXtype;                                     //获取当前节点绑定的数据的ViewXtype字段
}


4、TreeStore不含data属性所以配置内存代理TreeStore的时候要把data写到代理里面如下

//TreeStore内存代理
new Ext.data.TreeStore({


model: 'MyApp.model.NodeInterface',


proxy: {


data: {Data:[{id:'1',text:'12',Data:[{
id:'2',text:'122'},{
id:'3',text:'123'}]}]}


type: 'memory',


reader: {


type: 'json',


root: 'Data'


}


},


root: {                                        
//设置根节点属性


text: '----全部----',                      
 //显示值


id: '',                                    
 //value值


expanded: true                              
 //默认展开


},


autoLoad: true                                  
 //自动加载

 });
//Store内存代理
new Ext.data.Store({
	fields: ['ID', 'Name'],
	data: [{ID:1,name:'张三'},{ID:1,name:'李四},],
	autoLoad: true
});