ExtJS之 Tree

简单例子:

var store = Ext.create('Ext.data.TreeStore', {
               root: {
                   expanded: true,
                   text: "",
                   user: "",
                   status: "",
                   children: [
           { text: "detention", leaf: true },
           { text: "homework", expanded: true,
               children: [
                   { text: "book report", leaf: true },
                   { text: "alegrbra", leaf: true }
               ]
           },
           { text: "buy lottery tickets", leaf: true }
       ]
               }
           });

           Ext.create('Ext.tree.Panel', {
               title: 'Simple Tree',
               width: 200,
               height: 150,
               store: store,
               rootVisible: true,
               renderTo: Ext.getBody()
           });

多列树:

Ext.create('Ext.tree.Panel', {
              title: 'Simple Tree',
              width: 400,
              height: 300,

              rootVisible: true,
              renderTo: Ext.getBody(),
              useArrows: true,
              fields: ['name', 'description'],
              columns: [

              {
                  xtype: 'treecolumn',
                  text: '名称',
                  dataIndex: 'name',
                  flex: 1,
                  sortable: true

              },
              {
                  text: '描述',
                  dataIndex: 'description',
                  flex: 1,
                  sortable: true
              }
              ],
              root: {
                  name: 'sss',
                  description: '树根描述',
                  expanded: true,
                  text: "asd",
                  user: "",
                  status: "",
                  children: [
          { name: "detention", leaf: true },
          { name: "homework", expanded: true, description: 'sss',
              children: [
                  { name: "book report", leaf: true, description: 'book表述' },
                  { name: "alegrbra", leaf: true, description: 'asdasd' }
              ]
          },
          { name: "buy lottery tickets", leaf: true }
      ]
              }

          });

分级加载树节点

Ext.regModel('Info', {

                fields: ['iid', 'name', 'count']

            });

            var store = new Ext.data.TreeStore({

                model: 'Info',
                nodeParam: 'iid',
                proxy: {

                    type: 'ajax',
                    url: 'Handler.ashx',
                    reader: 'json'

                },
                autoLoad: true,
                root: {
                    name: 'root',
                    id: '-1'

                }

            })

            Ext.create('Ext.tree.Panel', {

                title: 'demo',
                renderTo: Ext.getBody(),
                width: 300,
                height: 500,
                columns: [{
                    xtype: 'treecolumn',
                    text: 'cname',
                    dataIndex: 'name',
                    width: 200,
                    sortable: true
                }, {
                    text: 'pcount',
                    dataIndex: 'count',
                    flex: 1,
                    sortable: true

                }

                        ],
                store: store,
                rootVisable: false

            })

转载于:https://www.cnblogs.com/Mr-Joe/archive/2012/03/01/2375773.html