EXTJS MVC Tree store

Question

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

应用程序/查看

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":[]}, 

Answer 1

TreePanel中的显示字段默认为文本，与返回的JSON这是确定的，但问题是专卖店模式，其中应包括字段的文本， CLS ..和其他属性，你在你的JSON。否则，这些将不会映射到记录，并且您将获得空文本。

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

编辑

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

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

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

此外，您可以删除displayField配置，然后将应用文本值，但这仍然意味着“标题”值将为空。

Answer 2

OK，终于得到了:) 设置displayfield树为 'text'

displayfield : 'text' 

而且，再次感谢您nscrob

还有一个问题，你能告诉我任何关于如何打开不同视图的指导，取决于树被点击的级别

这是有效的。

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

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