Extjs into the pit

Ext Js for the first time with this thing, is pulled to do a management module that just to use the tree, but fortunately there are examples refer to the project itself, or you'll be mad. The foundation did not say, for instance extjs in the class definition, creation and basic institutions.

Ext.tree.Panel

extjs the tree component is expressed through this class, I will not speak how to build, take a look at this class are those commonly used configuration

Configuration Options

root, and the root node of the tree is used to configure the structure may be arranged not to default children property name as the child node

 root: {
                    expanded: true,
                    children: [
                        {text: 'detention', leaf: true},
                        {
                            text: 'homework', expanded: true, children: [
                                {text: 'book report', leaf: true},
                                {text: 'algebra', leaf: true}
                            ]
                        },
                        {text: 'buy lottery tickets', leaf: true}
                    ]
                }

 

Value of the text is displayed in the tree, it expanded to control whether to proceed with the child node. It indicates whether the node is a leaf node child, children are child nodes.

Eventually the tree will be displayed as such

rootVisible

Used to control the tree node is visible, if visible above will want to have as a Root node

 Ext.data.TreeStore

store class is used to load data, it is impossible to write all the trees are dead, it is to be loaded. Ext.data.Model there is a store to define its data model, of course, the class may not be defined, the direct use this property to develop fields corresponding fields, Store automatically to build the model. Look at an example

me.store = Ext.create('Ext.data.TreeStore',
            {
                fields: [{
                    name: 'id',
                    mapping: 'deptId'
                }, 'deptId', 'code', 'fullName', 'shortName', 'level', 'status', 'date', 'pid',
                    {
                        name: 'icon', defaultValue: 'images/icons/group.png'
                    }],
                proxy: {
                    type: 'ajax',
                    async: false,
                    url: 'departmentManage/getDepartmentTree.action',
                    reader: {
                        type: 'json'
                    }
                },
                autoLoad: true
            }
        );

proxy is to load data into a store in the class. type is used to specify the type, use more is ajax, async is used to specify whether asynchronous loading. url is the path of the request, reader is used to read the data loaded into the proxy. Loaded data format is usually a nested structure (you can also have other structures that I know is this .....)

｛
text:'name'
children:[
{
text:'name',
children:[.....]
}
]
｝