Extjs中的panel

View Code

 1 var panel = new Ext.Panel({
 2           title : "面板",
 3           renderTo:"testPanel"//Panel的外层容器一般是DIV或SPAN的
 4             id : "testPanel"
 5           collapsible : true,// 可收缩
 6             collapsed:false,//收缩的
 7             width : 500,
 8           height : 200,
 9           autoScroll : true,// 自动卷轴
10             frame:true,//渲染框架
11             border : true,//边框
12             margins : '0 0 0 0',//边缘
13             split : true,// 分割条面板组合是经常用到
14             minHeight : 100,// 最小高度
15             autoHeight : true,//自动高度以下参数用于Panel的各个部位工具栏
16             tools : [{// 标题栏按钮
17              /*                 
18                    * id常用参数表//已经定义好的按钮id                 * - toggle
19          * - close
20          * - minimize
21          * - maximize
22          * - refresh
23          * - minus
24          * - plus - help - search - save - print                  */
25         id : "refresh",
26         qtip : 'Refresh form Data',// 快速提示//            hidden : true,    
27                handler : function(event, toolEl, panel) {
28                                     // close logic                    }
29     }],// 标题栏按钮
30            tbar : [//工具条按钮
31         {
32                         /* xtype参数用与匿名类创建(非常重要)
33                            -tbfill填充空白
34                                 -tbseparator分割线
35                                 -tbtext文本说明
36                               */
37                           xtype : 'tbtext',
38                           text : '工具条'
39                     },{//不指定xtype属性则默认为按钮(Button)
40                           pressed : true,
41                           text : '删除'
42                     }],//工具条按钮
43           bbar : [//底部工具条
44                         {
45                     /* xtype常用参数
46                          * -tbfill//填充空白
47                          * -tbseparator//分割线
48                          * -tbtext//文本说明
49                          */
50                       xtype : 'tbtext',
51                       text : '底部工具'
52                     },{//不指定xtype属性是默认为按钮
53                           pressed : true,
54                       text : "新建"
55                   }]//底部工具条
56           }
57 )

Extjs中的items是如何确定组件类型？

View Code

 1 var tabs2 = new Ext.TabPanel({   
 2         renderTo: document.body,   
 3         activeTab: 0,   
 4         600,   
 5         height:250,   
 6         plain:true,   
 7         defaults:{autoScroll: true},   
 8         items:{//没有xtype   
 9                 title: 'Normal Tab',   
10                 html: "My content was added during construction."  
11             }         
12     });

那么，怎么确定它是哪一种组件呢？怎么就知道它一定是Ext.Component的子组件呢？

回答：items里的{}是对象，都是组件对象，如果没有定义xtype，则一般的组件的子组件默认xtype是panel ，而FormPanel,FieldSet的默认子组件xtype是textfield

如下代码在jsontreesones数组里面，每个组件对象默认都是Ext.new Panel({}),Ext.new Panel({})可以去掉。

View Code

 1 for (var k = 0; len = jsontreeone.length, k < len; k++) {
 2         jsontreeones.push(new Ext.Panel({
 3                     title : jsontreeone[k].module_name,
 4                     border : false,//是否有边框
 5                     iconCls : jsontreeone[k].module_icon,//菜单项对应的图标
 6                     html : '<div id=' + "tree" + k + ' style="overflow:auto;100%;height:100%"></div>'
 7                 }));
 8     }
 9 
10     // 菜单工具栏
11     var menuPanel = new Ext.Panel({
12             region : 'west',
13             id : 'west-panel',
14             split : true,
15             width : 200,
16             minSize : 175,
17             maxSize : 400,
18             margins : '0 0 0 0',
19             layout : 'accordion',
20             title : '主菜单',
21             collapsible : true,
22             layoutConfig : {
23                 autoShow:true,
24                 animate : true
25             },
26             items : jsontreeones
27         });