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

最新推荐文章于 2017-07-27 19:42:00 发布

原创最新推荐文章于 2017-07-27 19:42:00 发布 · 774 阅读

0 ·

CC 4.0 BY-SA版权

EXTJS 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了ExtJS中TreeStore的使用方法，包括如何定义TreeStore及其模型、配置代理和读取数据的方式，以及如何处理自定义属性等内容。

陷阱一：TreeStore

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

Ext.define('MyApp.store.MenuStore', {       <span style="white-space:pre">	</span>    //定义一个树形的数据源
    extend: 'Ext.data.TreeStore',                   //继承自Ext.data.TreeStore
    model: 'MyApp.model.NodeInterface',             //指定Model为“MyApp.model.NodeInterface”在本项目中树的数据源统一采用本Model
    proxy: {                                        //请求代理设置
        type: 'ajax',                               //请求类型为AJAX
        url: '/GetMenuTree',      <span style="white-space:pre">		</span>    //请求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字段<pre name="code" class="html">}

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

<pre name="code" class="javascript">//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({
<span style="white-space:pre">	</span>fields: ['ID', 'Name'],
<span style="white-space:pre">	</span>data: [{ID:1,name:'张三'},<span style="font-family: Arial, Helvetica, sans-serif;">{ID:1,name:'李四},</span>],
<span style="white-space:pre">	</span>autoLoad: true
});