EXTJS MVC树店

时间:2012-09-06 14:19:39

标签: extjs treeview extjs4 extjs-mvc

我有一个树视图,它从树存储中获取数据。但是,我只能看到作为树结构的一部分显示的小文件夹。节点的名称没有显示,当我尝试打印记录时,它只是说它是一个空字符串。这是代码:

应用/浏览

Ext.define('App.view.Hierarchy', {
    alias: 'widget.hierarchy',
    extend: 'Ext.panel.Panel',

    initComponent: function () {

        var config = {

            xtype: 'panel',
            border: false,
            autoScroll: true,
            baseCls: 'topMenu',
            html: '<div class="PageTitle" style="width:600px;"><b>' + LANG.HIERARCHYT + '</b><br>' + LANG.HIERARCHYTxt + '<br>' + '</div>',


            items: [{
                xtype: 'toolbar',
                border: false,
                dock: 'top',
                items: [{
                    xtype: 'button',
                    text: LANG.BTADDREG,
                    iconCls: 'icon-add-tb',
                    cls: 'tip-btn',
                    iconAlign: 'right',
                    action: 'addRegion',
                    id: 'ADDREGION'
                }]

            },

            {
                xtype: 'treepanel',
                title: 'Hierarchy Tree',
                id: 'hierarchyTree',
                border: false,
                alias: 'widget.hierarchyTree',
                height: 1000,
                viewConfig: {
                    enableDD: true,
                    plugins: {
                        ptype: 'treeviewdragdrop'
                    }
                },
                collapsible: false,
                useArrows: true,
                rootVisible: false,
                store: Ext.create('Campus.store.HierarchyTree'),
                displayField: 'Title',
                multiSelect: false,
                singleExpand: false,


            }]
        }

        var holder = Ext.getCmp('center');
        holder.remove(0);
        holder.add(Ext.apply(config));
        this.callParent(arguments);
    }
});

模型

Ext.define('App.model.HierarchyTree', {
    extend : 'Ext.data.Model',
    fields : ['Title', 'ID', 'LevelID', 'ParentID'] 
});

存储

Ext.define('App.store.HierarchyTree', {
    extend: 'Ext.data.TreeStore',
    model: 'App.model.HierarchyTree',
    storeID: 'HierarchyTree',

    proxy: {
        type: 'ajax',
        url: 'data/Locations.aspx',

        reader: {

        },
        actionMethods: {
            create: 'POST',
            read: 'POST',
            update: 'POST'
        },
        extraParams: {
            mode: 'HIERARCHYFULLLIST'


        }
    },
    autoLoad: true
});

控制器

Ext.define('App.controller.Hierarchy', {
    extend: 'Ext.app.Controller',
    stores: ['Me', 'Regions', 'Areas', 'Towns', 'HierarchyTree'],
    model: ['Me', 'Teams', 'Regions', 'User', 'HierarchyTree'],
    views: ['App.view.Hierarchy', 'App.view.AddRegions'],
    refs: [{
        ref: 'myHierarchyTree',
        selector: 'hierarchyTree'
    }],

    init: function () {

        this.getHierarchyTreeStore().load();

        this.control({
            'button[action=addRegion]': {
                click: this.addRegion
            },
            '#hierarchyTree': {
                itemclick: this.itemclick

            }
        })
    },
    itemclick: function (view, record) {
        console.log(record.get('Title'))
    }
});

此外,返回的JSON是:

{"text":".","children": [{"text":"Asia Pacific","id":"537","level":"1", "expanded": 
 false,"singleClickExpand":true,"children":[{"text":"Japan", "cls":"xtreenode-Level2-
Indent", "id":"538", "hl1":"537","level":"2","singleClickExpand":true, "expanded":   
false, "children":[]},

2 个答案:

答案 0 :(得分:1)

Treepanel的显示字段默认为文本,返回json即可,但问题是商店模型,应该包含文本,cls ..以及json中的其他属性作为字段。否则这些将不会映射到记录,并且您将获得空文本。

Ext.define('App.model.HierarchyTree', {
extend : 'Ext.data.Model',
fields : ['Title', 'ID', 'LevelID', 'ParentID', 'text', 'level','cls,....]

修改

您已将displayField修改为Title,但json不包含title属性。您必须进行简单的修复,如果文本实际上是标题,则修改模型。您可以通过设置到该字段的映射来完成此操作。

  Ext.define('App.model.HierarchyTree', {
    extend : 'Ext.data.Model',
    fields : [{name:'Title',type:'string',mapping:'text'}, 'ID', 'LevelID', 'ParentID',]

这将导致标题由json中的文本值填充。

此外,您可以删除displayField配置,然后将应用文本值,但这仍然意味着'Title'值将为空。

答案 1 :(得分:1)

好的,终于搞定了:) 将树中的显示字段设置为“text”

 displayfield : 'text'

而且,再次感谢你nscrob

还有一个问题,请你给我任何关于如何根据被点击的树中的级别打开不同视图的指导

这很有效。

if (record.get('level')==1) 
    {
        this.erWin = Ext.create('App.view.EditRegions');

        this.erWin.showWin();
    }
    else{
        //open another_view
    }