When I finish my work at the end of the year, there are not many tasks, and there is plenty of free time. I haven't written anything for a long time. I feel like I don't exist in this world, and my technology is being updated every day, we have to take time to write and write articles, go out, and entertain ourselves. Otherwise, the whole people will be dispersed, now we can keep up with the social development by learning to work and relax ~~~
I learned how to use ExtJs in my free time. I used VS2008 as an example. The top part is the title, the left side is the function tree, and the right side is the page display framework. However, a problem was also found during the process, that is, the Items in the left-side Panel. After the style name with the image is added before the title, the image is always concave, there is always a border. After adding a tree, we also find that the default image in front of the node is also concave after expanding the node. The solution has not been found for a long time.
The effect is as follows:
Code:
Copy to ClipboardReference: [www.bkjia.com] 1 // Add to the left
2 var west = new Ext. Panel ({
3 // auto-shrinking button
4 collapsible: true,
5 border: false,
6 width: 225,
7 layout: "accordion ",
8 extraCls: "roomtypegridbbar ",
9 // Add an animation effect
10 layoutConfig :{
11 animate: true
12 },
13 region: "west ",
14 title: 'General Management System (CMS )',
15 //
16 items :[{
17 title: "<B> Menu </B> ",
18 autoScroll: true,
19 iconCls: "hotelmanageicon", // The style name contains the image address
20 items: [treenode] // create a tree function
21 },{
22 title: "<B> Back-stage </B> ",
23 autoScroll: true,
24 iconCls: "back-stage" // style name
25}]
26 });
27
28 var treenode = new Ext. tree. TreePanel ({
29 // an automatic scroll bar exceeded
30 autoScroll: true,
31 animate: true,
32 root: root,
33 // The default root directory is not displayed
34 rootVisible: false,
35 border: false,
36 animate: true,
37 lines: true,
38 enableDD: true,
39 containerScroll: true,
40 listeners:
41 {
42 "click": function (node, event ){
43 // click the leaf node to enter the link
44 if (node. isLeaf ()){
45 // display the leaf node menu
46 event. stopEvent ();
47 ALLEvents (node );
48} else {
49 // not an event not triggered by leaf nodes
50 event. stopEvent ();
51 // click to expand
52 node. toggle ();
53}
54}
55}
56 });
I don't know if a friend has encountered a similar problem or helped solve this problem. Thank you for choosing one of our friends ~
Author blog: http://zhf.cnblogs.com/