extjs4.x How to achieve the effect of a drop-down tree menu

Last Update:2017-01-13 Source: Internet

Author: User

Tags extend json

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

ExtJS How to achieve the effect of a drop-down tree menu. According to Lee's bad online look at all the ways you can implement this feature, you find that many people are customizing a class library to implement this feature. In fact, the official download of the ExtJS version has provided us with the Treepicker.js class library, is to achieve the Drop-down tree menu, under the Lee bad through a simple demo, for everyone to introduce:

1. Build ExtJS development environment, directory structure as follows:

Lee bad here's how the extjs4.x MVC pattern is developed, and the code for each file is given below, which is not explained in detail (if the children's shoes are unfamiliar to the MVC pattern of ExtJS

File index.html:

The code is as follows

Copy Code

<title>extjs4 Drop-down Tree Menu </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<link rel= "stylesheet" type= "Text/css" href= "Extjs4.2/resources/css/ext-all.css" >
<script type= "Text/javascript" src= "Extjs4.2/bootstrap.js" ></script>
<script type= "Text/javascript" src= "App.js" ></script>
<body></body>

File App.js:

Ext.Loader.setConfig ({
Enabled:true
});
Ext.application ({
Name: ' Demo ',
Appfolder: ' App ',
controllers: [' Controller '],
Autocreateviewport:true
});

File Controller.js:

Ext.define (' Demo.controller.Controller ', {
Extend: ' Ext.app.Controller ',
views:[
' Viewport '
]
});

File Viewport.js:

Ext.define (' Demo.view.Viewport ', {
Extend: ' Ext.container.Viewport ',
Margin: ' 100 0 0 200 ',
items:[{
Xtype: ' Form ',
Title: ' Drop Down tree menu ',
HEIGHT:500,
width:700
}];
});

Here our development environment is set up, visit the page, get an empty form, the effect is as follows:

2. Get the Treepicker class library, load the class in the project

Under the extjs4.2 examplesux path, locate the Treepicker.js file, put it under the View folder, and the directory structure is as follows:
Drop-down menu File structure directory diagram "width=" 245 "height=" 237 "size-full=" "src=" http://www.111cn.net/notfound.jpg "_fcksavedurl=" http:// Www.111cn.net/notfound.jpg "/>
Open the Treepicker.js file and modify the code (the first line of code for the file):

Open the Treepicker.js file and modify the code (the first line of code for the file):

Ext.define (' Ext.ux.TreePicker ', {
For:

Ext.define (' Demo.view.TreePicker ', {

Note: Here demo is the namespace, according to their actual situation to modify.
Load the Treepicker class library in controller, modify the Controller.js code to

The code is as follows	Copy Code
Ext.define (' Demo.controller.Controller ', { Extend: ' Ext.app.Controller ', views:[ ' Viewport ', ' Treepicker ' ] });

3. Define the Drop-down menu component in viewport, code as follows:

The code is as follows

Copy Code

Ext.define (' Demo.view.Viewport ', {
Extend: ' Ext.container.Viewport ',
Margin: ' 100 0 0 200 ',
items:[{
Xtype: ' Form ',
Title: ' Drop Down tree menu ',
HEIGHT:500,
width:700,
items:[{
Xtype: ' Treepicker ',
Fieldlabel: ' Pull down the tree ',
width:400,
Labelwidth:60,
Margin: ' 100 0 0 150 ',
Displayfield: ' Text ',
Rootvisible:false,
Value: ',
MINPICKERHEIGHT:200,
Store:Ext.create (' Ext.data.TreeStore ', {
Fields: [' id ', ' text '],
Root: {
Text: ' Celestial Department ',
Expanded:true
},
Proxy: {
Type: ' Ajax ',
URL: ' App/data/tree.json ',
Reader: {
Type: ' JSON '
}
}
})
}]
}]
});

Effect Chart:

Description:
When defining the Treepicker component, the store dataset must be defined in the view view and cannot be individually defined in the store file, otherwise it will not be displayed properly, and this is a different place from the general definition of the tree menu component, requiring attention!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More