【问题标题】:Extjs treepicker error when reading from a json format从 json 格式读取时,Extjs treepicker 错误
【发布时间】:2014-11-18 22:50:37
【问题描述】:

我还是 Extjs 的新手。我有一个 TreeStore,它读取一个 JSON 字符串作为输入,我可以在树面板中表示它。但是当我尝试在树选择器中使用树库时,会出现此错误:

这里有什么遗漏吗?

// try to find a record in the store that matches the value
        record = value ? me.store.getNodeById(value) : me.store.getRootNode();

这是 JSON 格式:

{
  success: true,
  "children": [
    {
      "id": "G_1",
      "text": "group1",
      "leaf": false
    }, 
    {
      "id": "G_2",
      "text": "group2",
      "leaf": false
     }
  ]
}

这是我的 TreeStore:

Ext.define('App.store.GroupTree', {
    extend: 'Ext.data.TreeStore',
    model: 'App.model.GroupTree',
    requires: 'App.model.GroupTree',
    proxy: {
        type: 'ajax',
        url: 'property/tree.json',
        reader: {  
            type: 'json',
            root:'children'
        }
    },
});

我的树选择器项目:

items: [
  {  
    xtype: 'treepicker',
    name: 'propertyCmb',
    fieldLabel: 'Property',
    labelWidth: 60,
    displayField: 'text',
    store: 'GroupTree',
    valueField: 'id',
    queryMode: 'local',
  }
]

这里是树存储模型代码

Ext.define('App.model.GroupTree', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'string', useNull: true},
        {name: 'text', type: 'string'},
        {name: 'leaf', type: 'boolean'},
        {name: 'expanded', type: 'boolean'}
    ]
});

【问题讨论】:

  • 请同时提供 App.model.GroupTree 的代码。是您的代码中出现错误还是 ExtJs 的代码?
  • 我在问题末尾添加了它
  • 是extjs错误

标签: extjs extjs-stores


【解决方案1】:

发生错误,因为商店在分配给您的树选择器(如store: 'GroupTree')时不是自动创建。 您必须首先创建它的一个实例,然后将该实例分配给 treepicker。请参阅文档http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.ux.TreePicker-cfg-store

以下应该可以工作

var groupStore = Ext.create('App.store.GroupTree');
groupStore.load();

var picker = Ext.create('Ext.ux.TreePicker',{
  name: 'propertyCmb',
  store: groupStore,
  fieldLabel: 'Property',
  labelWidth: 60,
  displayField: 'text',
  valueField: 'id',
  queryMode: 'local',
  renderTo: Ext.getBody()
});

可以在https://fiddle.sencha.com/#fiddle/dip 找到一个工作小提琴。

【讨论】:

    猜你喜欢
    • 2015-09-08
    • 2012-11-10
    • 2016-05-24
    • 1970-01-01
    • 1970-01-01
    • 2015-09-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多