Extjs中的panel

var panel = new Ext.Panel({
          title : "面板",
          renderTo:"testPanel"//Panel的外层容器一般是DIV或SPAN的
            id : "testPanel"
          collapsible : true,// 可收缩
            collapsed:false,//收缩的
            width : 500,
          height : 200,
          autoScroll : true,// 自动卷轴
            frame:true,//渲染框架
            border : true,//边框
            margins : '0 0 0 0',//边缘
            split : true,// 分割条面板组合是经常用到
            minHeight : 100,// 最小高度
            autoHeight : true,//自动高度以下参数用于Panel的各个部位工具栏
            tools : [{// 标题栏按钮
             /*                 
                   * id常用参数表//已经定义好的按钮id                 * - toggle
         * - close
         * - minimize
         * - maximize
         * - refresh
         * - minus
         * - plus - help - search - save - print                  */
        id : "refresh",
        qtip : 'Refresh form Data',// 快速提示//            hidden : true,    
               handler : function(event, toolEl, panel) {
                                    // close logic                    }
    }],// 标题栏按钮
           tbar : [//工具条按钮
        {
                        /* xtype参数用与匿名类创建(非常重要)
                           -tbfill填充空白
                                -tbseparator分割线
                                -tbtext文本说明
                              */
                          xtype : 'tbtext',
                          text : '工具条'
                    },{//不指定xtype属性则默认为按钮(Button)
                          pressed : true,
                          text : '删除'
                    }],//工具条按钮
          bbar : [//底部工具条
                        {
                    /* xtype常用参数
                         * -tbfill//填充空白
                         * -tbseparator//分割线
                         * -tbtext//文本说明
                         */
                      xtype : 'tbtext',
                      text : '底部工具'
                    },{//不指定xtype属性是默认为按钮
                          pressed : true,
                      text : "新建"
                  }]//底部工具条
          }
)

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

var tabs2 = new Ext.TabPanel({   
        renderTo: document.body,   
        activeTab: 0,   
        600,   
        height:250,   
        plain:true,   
        defaults:{autoScroll: true},   
        items:{//没有xtype   
                title: 'Normal Tab',   
                html: "My content was added during construction."  
            }         
    }); 

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

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

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

for (var k = 0; len = jsontreeone.length, k < len; k++) {
        jsontreeones.push(new Ext.Panel({
                    title : jsontreeone[k].module_name,
                    border : false,//是否有边框
                    iconCls : jsontreeone[k].module_icon,//菜单项对应的图标
                    html : '<div id=' + "tree" + k + ' style="overflow:auto;100%;height:100%"></div>'
                }));
    }

    // 菜单工具栏
    var menuPanel = new Ext.Panel({
            region : 'west',
            id : 'west-panel',
            split : true,
            width : 200,
            minSize : 175,
            maxSize : 400,
            margins : '0 0 0 0',
            layout : 'accordion',
            title : '主菜单',
            collapsible : true,
            layoutConfig : {
                autoShow:true,
                animate : true
            },
            items : jsontreeones
        });