我如何将数据XML存储到Sencha Extjs的Tree列表中?

时间:2017-07-22 11:45:43

标签: javascript xml extjs

任何人都可以帮助我,我只是想首先将数据存入商店然后进入Sencha Extjs的treelist但是我什么都不知道因为我是Sencha的新手到目前为止我使用的代码如下:

XML代码:

 <?xml version="1.0" encoding="UTF-8"?>
 <root>
  <expanded>true</expanded>
  <children>
     <element>
        <text>Home</text>
     </element>
     <element>
        <children>
           <element>
              <leaf>true</leaf>
              <text>Messages</text>
           </element>
           <element>
              <leaf>true</leaf>
              <text>Music</text>
           </element>
        <element>
              <leaf>true</leaf>
              <text>Video</text>
           </element>
        </children>
        <text>Users</text>
     </element>
     <element>
        <text>setting</text>
     </element>
     <element>
        <children>
           <element>
              <leaf>true</leaf>
              <text>University</text>
          </element>
         </children>
        </element>
  </children>

Main.js代码:

items: [{
    xtype: 'treelist',      
    reference: 'treelist',
    expanderOnly: false, 
    listeners:{
        selectionchange :'treeNodeSelect' 
    },
    bind: '{navItems}',
}],

商店所在的模态数据:

Ext.define('AppName.view.tree.TreeListModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.tree-liststore',
    fields: ['expanded', 'children', 'leaf', 'text'],
    data: {
        name: 'AppName',
    },
    stores: {
        navItems: {
            type: 'tree',
            proxy: {
                type: 'ajax',
                url : '/classic/resources/test.xml',
                reader: {
                    type: 'xml',
                    record: 'children',
                    rootProperty: 'root'
                }
            }
        }
    }
});

1 个答案:

答案 0 :(得分:0)

关于XML结构的一些事情:

  1. 您没有关闭第一个<root>代码。
  2. <leaf>true</leaf><leaf>false</leaf>标记所有节点是明智的。
  3. 您的上一个元素有children但它没有文本且未标记为<leaf>false</leaf>,因此它会破坏树结构,因为它没有包含子节点的节点。
  4. 您的XML应如下所示:

    <?xml version="1.0" encoding="UTF-8"?>
    <root>
        <expanded>true</expanded>
        <children>
            <element>
                <text>Home</text>
                <leaf>true</leaf>
            </element>
            <element>
                <text>Users</text>
                <leaf>false</leaf>
                <children>
                    <element>
                        <leaf>true</leaf>
                        <text>Messages</text>
                    </element>
                    <element>
                        <leaf>true</leaf>
                        <text>Music</text>
                    </element>
                    <element>
                        <leaf>true</leaf>
                        <text>Video</text>
                    </element>
                </children>
            </element>
            <element>
                <text>Setting</text>
                <leaf>true</leaf>
            </element>
            <element>
                <text>Some Name Here</text>
                <leaf>false</leaf>
                <children>
                    <element>
                        <leaf>true</leaf>
                        <text>University</text>
                    </element>
                </children>
            </element>
        </children>
    </root>
    

    此外,您的xml阅读器不需要rootProperty,因为它root但您只想将与其相关的第一个元素视为记录,因此您的record应该是:> element

    stores: {
        navItems: {
            type: 'tree',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url : 'test.xml',
                reader: {
                    type: 'xml',
                    record: '> element'
                }
            }
        }
    }
    

    检查这个小提琴:https://fiddle.sencha.com/#view/editor&fiddle/23pv