ExtJS 3.2.1使用学习

Ext.onReady(function(){
            // 弹出框，第一个参数为标题，第二个参数为显示内容
            // Ext.MessageBox.alert('Title','Content text !');
            // 含内容的窗口
            //  var win = new Ext.Window({
            //      title : "面板1",
            //      html : "面板1内容",
            //      height : 100,
            //      width : 100
            //  });
            //  win.show();
            // 组件可以直接通过new关键字创建
            // 创建一个窗口使用 new Ext.Window();
            // 创建一个表格new Ext.gridPanel();
            // 除一些普通组件以外，一般都会在构造函数中通过传递参数来创建组件‘
            // 组件根据构造函数中的参数属性值来初始化组件
            // var user = {
            //     title : title,
            //     html : hello,
            //     width : 200,
            //     height :200,
            // };
            // var panel = new Ext.Panel(user);
            // 渲染时需要有相应的dom,render的参数为dom的id属性值
            // panel.render("panel");
            // 对于容器中的子元素组件，都支持延迟加载的方式创建控件，
            // 此时可以直接通过在需要父组件的构造函数中通过给属性items传递数组的方式实现构造
            // var panel = new Ext.TabPanel({
            //     width : 600,
            //     height : 300,
            //     items :[{
            //         title : '面板one',
            //     },{
            //         title : '面板2',
            //     },{
            //         title : '面板3',
            //     }]
            // });
            // panel.render("panel");
            // 除了一些特殊的组件或类以外，
            // 所有的组件在初始化的时候都可以在构造函数使用一个包含属性名及值的对象，
            // 该对象中的信息也就是指组件的配置属性
            // 例如：
            // var a = new Ext.Panel({
            //     title : "面板",
            //     html : "面板内容",
            //     height :100,
            //     //不添加width，默认显示窗口的大小
            //     width : 200
            // });
            // a.render("panel");
            // var b = new Ext.Button({
            //     text : '添加',
            //     // true为不可按
            //     pressed : false,
            //     height : 30,
            //     width : 60,
            //     handler : Ext.emptyFn()
            // });
            // b.render("button");
            // Ext事件处理事件统一由Ext.EventManager对象管理
            // Ext封装了一个Ext.EventObject事件对象
            // 支持事件处理的类为Ext.util.Observable
            // 凡是继承该类的组件或类都支持王对象中添加事件及响应功能
            //Ext.get()的参数为dom的id属性值
            // Ext.get("button")得到一个与页面中的按钮关联的Ext.Element对象
            // 可直接调用该对象上的addListerner方法来个对象添加事件
            // 在调用addListerner方法的代码中，第一个参数表示事件的名称，第二个参数表示处理器或响应函数
            // ExtJs支持时间队列，可以在对象中添加多个响应函数
            // function a() {
            //     alert("do some thing");
            // }
            // function c() {
            //     alert("do some thing !");
            // }
            // var b = new Ext.Button({
            //     text : '添加',
            //     // true为不可按
            //     pressed : false,
            //     height : 30,
            //     width : 60,
            //     handler : Ext.emptyFn()
            // });
            // b.render("button");
            // Ext.get("button").addListener("click", a);
            // // addListerner方法的简写形式是on
            // Ext.get("button").on("click", c);
            // //ExtJS还支持事件延迟处理及事件处理缓存等功能
            // Ext.get("button").on("click", a, this, {delay : 2000});
            // 在使用Ext的事件时，我们一般是直接在控件上实现
            // 每一个控件包含哪些事件，在什么时候触发时，触发时传递的参数等
            // 在ExtJS项目文档中有详细说明
            // 比如对于所有的组件Component，都包含一个beforedestroy事件
            // 该事件会在Ext销毁一个组件的时候触发
            // 如果事件响应函数返回false
            // 则会取消组件的销毁操作
            // var win = new Ext.Window({
            //     title : '不能关闭的窗口',
            //     height : 200,
            //     width : 300
            // });
            // win.on("beforedestroy",function (obj) {
            //     alert("不能关闭");
            //     obj.show();
            //     return false;
            // });
            // win.show();
            // 面板Panel是ExtJS控件的基础
            // 由顶部工具栏、底部工具栏、面板头部、面板底部、面板主区域组成
            // 内置面板展开和关闭功能，面板可以放入其他任何容器中，面板也可以包含其他组件
            // 面板的类名为Ext.Panel，其xtype为panel，以下显示面板的组成部分
            // var panel = new Ext.Panel({
            //     title : '面板头部header',
            //     width : 200,
            //     height : 200,
            //     html : '<h1>O(^_^)O</h1>',
            //     // 渲染到某个dom上
            //     renderTo : 'hello',
            //     tbar : [{
            //         text : 'tbar',
            //         // pressed :true
            //     }],
            //     bbar : [{
            //         text : 'bbar'
            //     }],
            //     buttons : [{
            //         text : 'button2'
            //     },{
            //         text : 'button1'
            //     }]
            // });
            // panel.render("panel");
            // Ext工具栏由Ext.Toolbar()类表示
            // 工具栏可以存放按钮、文本、分隔符等内容
            // new Ext.Panel({
            //     // 渲染到某个dom上
            //     renderTo : 'hello',
            //     title : 'hello',
            //     width : 300,
            //     height : 200,
            //     html : '<h1>Hello,easy</h1>',
            //     tbar:[{
            //         pressed : true,
            //         text : '刷新'
            //     }],
            //     tools : [{
            //         id : 'save'
            //     },{
            //         id : 'help'
            //     },{
            //         id : 'close',
            //         //按下去的处理函数
            //         handler : function(){
            //             var hello = Ext.get('hello');
            //             hello.remove();
            //         }
            //     }]
            // });
            // 在顶部或底部还可以加入包括按钮、文本、空白、填充条、分隔符等的工具栏选项
            // new Ext.Panel({
            //     renderTo : 'hello',
            //     title : 'hello',
            //     width : 300,
            //     height : 200,
            //     html : '<h1>Hello,easy</h1>',
            //     tbar : [
            //         new Ext.Toolbar.TextItem('工具栏'),
            //         //对齐方式：tbfill 右对齐
            //         {xtype : 'tbfill'},
            //         {
            //             //无论是否为true，都可以按，只不过true显示无背景，看不出是个按钮
            //             pressed : true,
            //             text :'添加',
            //             handler : function(){
            //                 Ext.get('hello').remove();
            //             }
            //         },
            //         //有距离分隔
            //         {xtype : 'tbseparator'},
            //         {
            //             pressed :true,
            //             text : '保存'
            //         }
            //     ]
            // });
            // 在前面的示例中，为了显示一个面板，我们需要在页面上添加一个，
            // 然后把Ext控件渲染到这个div上
            // Viewport代表这个浏览器显示区域，该对象渲染到页面中的body区域
            // 并会随着浏览器显示区域的大小自动改变，一个页面只有一个Viewport实例
            // Viewport不需要指定renderTo
            // new Ext.Viewport({
            //     enableTabScroll : true,
            //     // 布局，常用fit、border
            //     layout : 'fit',
            //     items :[{
            //         title : '面板',
            //         html : '',
            //         bbar :[{text :'按钮1'},{text : '按钮2'}]
            //     }]
            // });
            // new Ext.Viewport({
            //     enableTabScroll : true,
            //     layout : 'border',
            //     items : [{
            //         title : '菜单',
            //         //布局方式，按照上北下南左西右东，面板按照items的顺序放置
            //         region : 'west',
            //         width : 200,
            //         collapsoble : true,
            //         html : '菜单栏'
            //     },{
            //         title : '面板',
            //         region : 'south',
            //         height : 50,
            //         html : '<h1>后台</h1>'
            //     },{
            //         xtype : 'tabpanel',
            //         region : 'center',
            //         items : [{title : '面板1'},{title : '面板2'}]
            //     }]
            // });
            // ExtJS窗口由Ext.Window()类定义，该类继承自Panel
            // 窗口是一种特殊的Panel
            // var i = 0;
            // function newWin() {
            //     var win = new Ext.Window({
            //         title : '窗口'+i++,
            //         width : 400,
            //         height : 300,
            //         // 是否显示可最大化窗口按钮
            //         maximizable : true,
            //     });
            //     win.show();
            // }
            // button = new Ext.Button({
            //     text : '新窗口',
            //     width : 100
            // });
            // button.render('bin');
            // Ext.get('bin').on('click',newWin);
            // 窗口是分组进行管理的，可以对一组窗口进行操作
            // 默认情况下的窗口都在默认的组Ext.WindowMgr中
            // 窗口分组由类Ext.WindowGroup()定义
            // 该类包括bringToFront、getActive、hideAll、sendToBack等方法用来对分组中的窗口进行操作
            // var i = 0 , myGroup;
            // function newWin() {
            //     var win = new Ext.Window({
            //         title : '窗口'+i++,
            //         width : 400,
            //         height : 300,
            //         // 是否显示可最大化窗口按钮
            //         maximizable : true,
            //         // 窗口归属于哪个组
            //         manager : myGroup
            //     });
            //     win.show();
            // }
            // function toBack() {
            //     myGroup.sendToBack(myGroup.getActive());
            // }
            // function hideAll() {
            //     myGroup.hideAll();
            // }
            // // 显示怎么办？
            // myGroup = new Ext.WindowGroup();
            // Ext.get("bin").on('click', newWin);
            // Ext.get('toback').on('click', toBack);
            // Ext.get('hide').on('click', hideAll);
            // Ext.get('show').on('click', showAll);
            // ExtJS的对话框封装在Ext.MessageBox()类，简写形式为Ext.Msg
            // 可以直接通过调用响应的对话框方法来显示Ext对话框
            // 包括但不限于：alert/confirm/prompt/progress/wait
            // 也可自定义对话框
            // 普通对话框一般包含四个参数：
            // title 对话框标题
            // msg 提示信息
            // Function fn 可选参数，关闭对话框执行的回调函数
            // Object scope 回调函数执行作用域
            // 可以在回调函数中通过button参数判断用户做了什么选择
            // 通过text来读取在对话框中输入的内容
            // Ext.get('bin').on('click', function(){
            //     // confirm
            //     // Ext.MessageBox.confirm('请确认', '是否删除指定内容', function (button, text){
            //     //     alert(button);
            //     //     alert(text);
            //     // });
            //     // prompt
            //     Ext.get('bin').on('click', function(){
            //        Ext.MessageBox.prompt('输入提示框', '请输入...', function (button, text) {
            //           Ext.MessageBox.alert('选按的是'+button+'   输入内容是'+text);
            //        });
            //     });
            // });
            // 实际应用中，可以直接使用MessageBox的show方法来显示自定义的对话框
            // function save(button) {
            //         Ext.MessageBox.alert(button);
            // }
            // Ext.get('bin').on('click', function () {
            //     Ext.MessageBox.show({
            //         title : '保存数据',
            //         msg : '保存修改？',
            //         // 不加，则无选择项
            //         buttons : Ext.Msg.YESNOCANCEL,
            //         fn : save,
            //         // 文本前的图标
            //        icon : Ext.MessageBox.QUESTION
            //     });
            // });
            // ExtJS的布局基类为Ext.layout.ContainerLayout,其他布局继承该类
            // ExtJS的容器组件包含一个layout及layoutConfig配置属性
            // 这两个属性用来指定容器使用的布局及布局的详细配置信息
            // 如果没有指定容器的layout，则默认会使用ContainerLayout作为布局
            // 该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的不需要
            // TabPanel使用card布局  FromPanel使用form布局  GridPanel使用column布局
            // 在使用这些组件的时候，不能给这些容器再指定另外的布局
            // new Ext.Panel({
            //    renderTo : 'hello',
            //    width : 400,
            //    height : 200,
            //    layout : 'column',
            //    items:[{
            //        // 占父面板的百分比
            //        columnWidth : 0.5,
            //        title : '面板1'
            //    },{
            //        columnWidth :0.5,
            //        title : '面板2'
            //    }]
            // });
            // Border区域布局由类Ext.layout.BorderLayout定义,布局名称为border
            // 改布局把容器分成东南西北中:est/sourth/west/north/center
            // center区域必须设置
            // 在往容器中添加子元素的时候，只需指定子元素的位置，border会自动把子元素放到布局指定的位置
            // new Ext.Viewport({
            //    layout : 'border',
            //    items : [
            //        {region : 'north', height : 50, title : '顶部面板'},
            //        {region : 'south', height : 50, title : '底部面板'},
            //        {region : 'center', width : 100, title : '中间面板'},
            //        {region : 'west', width : 250, title : '左边面板'},
            //        {region : 'east', width : 250, title : '右边面板'}]
            // });
            // Column布局由Ext.layout.ColumnLayout类定义,名称为column
            // 列布局把整个容器组件看成一列
            // 往里面存放子元素的时候
            // 可以通过在子元素中指定使用columnWidth或width指定子元素所占列的宽度
            // columnWidth表示使用百分比的形式指定列的宽度
            // width使用绝对像素的方式指定列的宽度
            // 在实际情况中，可以混合使用
            // new Ext.Panel({
            //     renderTo : 'hello',
            //     title : '父容器',
            //     layout : 'column',
            //     width : 500,
            //     height : 100,
            //     items : [
            //         {title : '列1', width : 100},
            //         {title : '列2', width : 200},
            //         {title : '列3', width : 100},
            //         //总和不大于父容器宽度，按绝对像素填充，空就空着
            //         // {title : '列4', width : 50}
            //         // 总和大于父容器宽度，谁都不削减，谁在后面谁起一行
            //         // {title : '列4', width : 150}
            //         // 绝对像素的先占，剩余的按照百分比分配比例
            //         {title : '列4', columnWidth : 0.5}
            //     ]
            // });
            // 不启用布局，组件会以非贪婪模式占位，尽量挤占最小的空间
            // 启用fit布局，则会以贪婪模式挤占空间,第一个占完
            // 比较：
            // new Ext.Panel({
            //     renderTo : 'panel',
            //     title : '容器组件1',
            //     width : 500,
            //     height : 100,
            //     items : [
            //         {title : '子元素1', html : '子元素1内容'},
            //         {title : '子元素2', html : '子元素2内容'}
            //     ]
            // });
            // new Ext.Panel({
            //     renderTo : 'hello',
            //     title : '容器组件2',
            //     layout : 'fit',
            //     width : 500,
            //     height : 300,
            //     items : [
            //         {title : '子元素1', html : '子元素1内容'},
            //         {title : '子元素2', html : '子元素2内容'}
            //     ]
            // });
            // form布局由类定义Ext.layout.FormLayout()定义，名称是form
            // 是一种专门用于管理表单中输入字段的布局
            // 这种布局主要用于在程序中创建表单字段或表单元素等使用
            // new Ext.Panel({
            //     renderTo : 'hello',
            //     title : '容器组件',
            //     layout : 'form',
            //     width : 300,
            //     // 是否隐藏标签
            //     hideLabels : false,
            //     // 标签对齐方式
            //     labelAlign : 'right',
            //     height : 120,
            //     defaultType : 'textfield',
            //     items :[
            //         {fieldLabel : '请输入姓名', name : 'name'},
            //         {fieldLabel : '请输入地址', name : 'add'},
            //         {fieldLabel : '请输入电话', name : 'tel'}
            //     ]
            // });
            // Accordion布局由Ext.layoutAccordion定义，名称为accordion
            // 表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式
            // new Ext.Panel({
            //     renderTo : 'hello',
            //     title : '容器组件',
            //     layout : 'accordion',
            //     width : 500,
            //     height : 200,
            //     // 布局配置参数
            //     layoutConfig : {
            //         // 是否开启折叠动画
            //         animate :true
            //     },
            //     items : [
            //         {title : '子元素1', html : '1内容'},
            //         {title : '子元素2', html : '2内容'},
            //         {title : '子元素3', html : '3内容'}
            //     ]
            // });
            // Table布局由类Ext.TableLayout定义，名称为table
            // 该布局负责吧容器中的子元素按照类似普通html标签<table>排列
            // new Ext.Panel({
            //     renderTo : 'hello',
            //     title : '容器组件',
            //     width : 600,
            //     height : 200,
            //     layout : 'table',
            //     layoutConfig : {
            //         // 父容器分成的列数
            //         columns : 3
            //     },
            //     items : [
            //         // rowspan/colspan指定横跨单元格数
            //         // 单元格宽度按照内容多少划分
            //         // 支持内容中使用br标签换行
            //         {title : '子元素1', html : '子元素1内容111<br>111', rowspan : 2, height : 100},
            //         {title : '子元素2', html : '子元素2内容', colspan : 2},
            //         {title : '子元素3', html : '子元素3内容'},
            //         {title : '子元素4', html : '子元素4内容'}
            //     ]
            // });
            // 表格由类Ext.grid.GridPanel定义,继承自Panel，其xtype为grid
            // 在ExtJS中，表格Grid必须包含列定义信息，并指定表格到的数据存储器Store
            // 表格的列信息由列Ext.grid.ColumnModel定义
            // 而表格的数据存储器有Ext.data.Store定义
            // 数据存储根据解析的数据不同分为
            // JsonStore/SimpleStore/GroupingStore
            // 定义表格中显示的数据，这是二维数据
            // var data = [
            //     [1, 'A', 'A', 'A'],
            //     [2, 'B', 'B', 'B']
            // ];
            // 创建数据存储，负责创建一个表格
            // 表二包含的列由columns配置属性来描述
            // columns是一个数组,每一行数据元素描述表格的一列信息
            // 表格的列信息包含列头显示文本header、列对应的记录集字段dataIndex
            // 列是否排序sortable、列的渲染函数renderer、宽带width、格式化信息format
            // var store = new Ext.data.SimpleStore({
            //     data : data,
            //     fields : ['id', 'name', 'organization', 'homepage']
            // });
            // function showUrl(value) {
            //     return "<a href='http://wwww."+value+".com'>"+value+"</a>";
            // }
            // var grid = new Ext.grid.GridPanel({
            //     renderTo : 'hello',
            //     title : 'ZZZ',
            //     height : 150,
            //     width : 500,
            //     columns : [
            //         // header列标题,dataIndex store中的那一列,width指定列的宽度
            //         {header : '项目名称', dataIndex : 'name', sortable : true, width : 100},
            //         {header : '开发团队', dataIndex : 'organization', width : 100},
            //         {   header : '网址',
            //             dataIndex : 'homepage',
            //             width : 150,
            //             renderer : showUrl
            //             // format : {
            //             //     fontSize : 20
            //             // }
            //         }
            //     ],
            //     store : store,
            //     autoExpandColumn : 0
            // });
            // EditorGridPanel可以直接在表格的数据进行编辑，
            // ExtJS的可便捷表格由Ext.grid.EditorGridPanel表示
            // xtype为etidorgrid
            // 使用EditorGridPanel与使用普通帆软GridPanel方式一样
            // 区别只是在定义列信息的时候，可以指定某一类使用的编辑即可
            // var data = [{
            //     id : 1,
            //     name : '小王',
            //     email : 'xiaowang@126.com',
            //     sex : '男',
            //     bornDate : '1992-5-6'
            // },{
            //     id : 2,
            //     name : '小李',
            //     email : 'xiaoli@126.com',
            //     sex : '女',
            //     bornDate : '1992-5-6'
            // },{
            //     id : 3,
            //     name : '小兰',
            //     email : 'xiaoli@126.com',
            //     sex : '女',
            //     bornDate : '1993-3-3'
            // }];
            // var store = new Ext.data.JsonStore({
            //     data : data,
            //     fields : [
            //         "id",
            //         "name",
            //         "email",
            //         "sex",
            //         {
            //             name : "bornDate",
            //             type : "date",
            //             dateFormat : 'Y-n-j'
            //         }
            //     ]
            // });
            // var colM = new Ext.grid.ColumnModel([
            //     {
            //         header : '姓名',
            //         dataIndex : 'name',
            //         sortable : true,
            //         editor : new Ext.form.TextField()
            //     },{
            //         header : '性别',
            //         dataIndex : 'sex',
            //         sortable : true,
            //         editor : new Ext.form.ComboBox({
            //             transform : 'sexList',
            //             triggerAction : 'all',
            //             lazyRender : true
            //         })
            //     },{
            //         header : '邮件',
            //         dataIndex : 'email',
            //         sortable : true,
            //         editor : new Ext.form.TextField()
            //     },{
            //         header : '出生日期',
            //         dataIndex : 'bornDate',
            //         render : Ext.util.Format.dateRenderer('Y 年 m 月 d 日'),
            //         sortable : true,
            //         editor : new Ext.form.DateField({ format : 'Y 年 m 月 d 日'})
            //     }
            // ]);
            // var grid = new Ext.grid.EditorGridPanel({
            //     renderTo : 'hello',
            //     cm : colM,
            //     store : store,
            //     title : '学生管理',
            //     width : 500,
            //     height : 200,
            //     autoExpandColumn : 3
            // });
            //Demo
            var data = [{
                id : 1,
                name : '小王',
                email : 'xiaowang@126.com',
                sex : '男',
                bornDate : '1992-5-6'
            },{
                id : 2,
                name : '小李',
                email : 'xiaoli@126.com',
                sex : '女',
                bornDate : '1992-5-6'
            },{
                id : 3,
                name : '小兰',
                email : 'xiaoli@126.com',
                sex : '女',
                bornDate : '1993-3-3'
            }];
            var store = new Ext.data.JsonStore({
                data : data,
                fields : [
                    "id",
                    "name",
                    "email",
                    "sex",
                    {
                        name : "bornDate",
                        type : "date",
                        dateFormat : 'Y-n-j'
                    }
                ]
            });
            var colM = new Ext.grid.ColumnModel([
                {
                    header : '姓名',
                    dataIndex : 'name',
                    sortable : true,
                    editor : new Ext.form.TextField()
                },{
                    header : '性别',
                    dataIndex : 'sex',
                    sortable : true,
                    editor : new Ext.form.ComboBox({
                        transform : 'sexList',
                        triggerAction : 'all',
                        lazyRender : true
                    })
                },{
                    header : '邮件',
                    dataIndex : 'email',
                    sortable : true,
                    editor : new Ext.form.TextField()
                },{
                    header : '出生日期',
                    dataIndex : 'bornDate',
                    render : Ext.util.Format.dateRenderer('Y 年 m 月 d 日'),
                    sortable : true,
                    editor : new Ext.form.DateField({ format : 'Y 年 m 月 d 日'})
                }
            ]);
            new Ext.Viewport({
                enableTabScroll : true,
                layout : 'border',
                items : [{
                    xtype : 'tabpanel',
                    region : 'center',
                    items :[{
                        title : '电子邮件',
                        layout : 'border',
                        items : [{
                            region : 'west',
                            width : 200,
                            height : 200,
                            layout : 'accordion',
                            layoutConfig : { animate : true},
                            collapsible : true,
                            items : [{
                                title : '邮件夹'
                            },{
                                title : '邮件搜索'
                            },{
                                title : '邮箱管理'
                            }]
                        },{
                            region : 'center',
                            layout : 'fit',
                            items : [
                                new Ext.grid.EditorGridPanel({
                                    cm : colM,
                                    store : store,
                                    title : '学生管理',
                                    tbar : [
                                        new Ext.Toolbar.TextItem('工具栏'),
                                        {xtype : 'tbfill'},
                                        {
                                            pressed : false,
                                            text : '新窗口',
                                            handler : function(){
                                                //设置树的根节点以及其他节点
                                                var root = new Ext.tree.TreeNode({
                                                    text : 'root',
                                                    id : 'root',
                                                    checked : false,
                                                    leaf : false
                                                });
                                                var c1 = new Ext.tree.TreeNode({
                                                    text : '费用相关',
                                                    id : 'c1',
                                                    checked : false,
                                                    leaf : false
                                                });
                                                var c2 = new Ext.tree.TreeNode({
                                                    text : '目标用户',
                                                    id : 'c2',
                                                    checked : false,
                                                    leaf : false
                                                });
                                                var c3 = new Ext.tree.TreeNode({
                                                    text : '受理渠道',
                                                    id : 'c3',
                                                    checked : false,
                                                    leaf : false
                                                });
                                                root.appendChild(c1);
                                                root.appendChild(c2);
                                                root.appendChild(c3);
                                                for(var j = 1; j < 4; j++){
                                                    c1.appendChild(new Ext.tree.TreeNode({text : '栏目'+j, checked : false, leaf : true}));
                                                    c2.appendChild(new Ext.tree.TreeNode({text : '栏目'+j, checked : false, leaf : true}));
                                                    c3.appendChild(new Ext.tree.TreeNode({text : '栏目'+j, checked : false, leaf : true}));
                                                }
                                                var win = new Ext.Window({
                                                    title : '窗口',
                                                    tbar : [{
                                                        xtype : 'tbfill'
                                                    },{
                                                        xtype : 'button',
                                                        text : '提交'
                                                    }],
                                                    // 面板伸缩
                                                    collapsible : true,
                                                    height : 300,
                                                    layout : {
                                                        type : 'vbox',
                                                        align : 'center'
                                                    },
                                                    items : [{
                                                        xtype : 'box',
                                                        html : '<br>关注内容<br>'
                                                    },{
                                                        xtype : 'radio',
                                                        name : 'xh',
                                                        boxLable : 'e9-1 套餐',
                                                        id : 'r1'
                                                    },{
                                                        xtype : 'radio',
                                                        name : 'xh',
                                                        boxLable : 'e9-3 套餐',
                                                        id : 'r2'
                                                    },{
                                                        xtype : 'box',
                                                        html : '<br><br>'
                                                    },{
                                                        xtype : 'treepanel',
                                                        width : 200,
                                                        autoScroll : true,
                                                        autoHeight : true,
                                                        useArrows : true,
                                                        animate : true,
                                                        loader : new Ext.tree.TreeLoader(),
                                                        root : root,
                                                        // 是否支持拖拽
                                                        enableDD : false,
                                                        // 是否支持滚动条
                                                        containerScroll : true,
                                                        // 是否隐藏根节点
                                                        rootVisible :false,
                                                        listeners : {
                                                            checkchange : function(node, checked){
                                                                // 自动选中根节点
                                                                node.expand();
                                                                node.attributes.checked = checked;
                                                                node.eachChild(function(child){
                                                                    child.ui.toggleCheck(checked);
                                                                    child.fireEvent('checkchange', child, checked);
                                                                });
                                                            }
                                                        }
                                                    }],
                                                    // 是否支持最大化窗口
                                                    maximizable : false
                                                });
                                                win.show();
                                            }
                                        },{ xtype : 'tbseparator'
                                        },{
                                            pressed : false,
                                            text : '添加'
                                        },{
                                            xtype : 'tbseparator'
                                        },{
                                            pressed : false,
                                            text : '保存'
                                    }],
                                    bbar : [{
                                        xtype : 'tbfill'
                                    },{
                                        xtype : 'tbbutton',
                                        text : 'button1'
                                    },{
                                        xtype : 'tbseparator'
                                    },{
                                        xtype : 'tbbutton',
                                        text : 'button2'
                                    }],
                                    autoExpandColumn : 3
                                })
                            ]
                        }]
                    },{
                        title : '网络存储'
                    },{
                        title : '日常安排'
                    }]
                }]
            });
        });

转自：https://wenku.baidu.com/view/74d8d94e2e3f5727a5e962f4.html