ExtJs Image Display Error

Source: Internet
Author: User

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/

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.