ext 布局 独孤九剑-第五式

< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
         < title > extDemo </ title >
         < link  rel ="stylesheet"  type ="text/css"
            href ="/ext/resources/css/ext-all.css"   />
         < script  type ="text/javascript"  src ="/ext/adapter/ext/ext-base.js" ></ script >
         < script  type ="text/javascript"  src ="/ext/ext-all.js" ></ script >
         < script  type ="text/javascript" >
         Ext.onReady( function (){
             // 创建一个工具条
             var  tb = new  Ext.Toolbar('toolbar - div');
            tb.add( new  Ext.Toolbar.SplitButton({
                  text: '文件',
                  cls: 'x - btn - text - icon blist',
                menu : {items: [
                 {text: '新建', handler: onItemClick},
                 {text: '保存', handler: onItemClick},
                 {text: '加载', handler: onItemClick}
           ]}}),
            new  Ext.Toolbar.MenuButton({
               text: '编辑',
               cls: 'x - btn - text - icon blist',
               menu : {items: [
                 {text: '复制', handler: onItemClick},
                 {text: '粘贴', handler: onItemClick}
           ]}})
         );
        
         // 创建树型菜单
         var  root  =   new  Ext.tree.TreeNode({
            text: '文件夹',
            allowDrag: false ,
            allowDrop: false
        });
        root.appendChild(
             new  Ext.tree.TreeNode({text:'收件箱',allowDrag: false }),
             new  Ext.tree.TreeNode({text:'发件箱',allowDrag: false }),
             new  Ext.tree.TreeNode({text:'联系人',allowDrag: false }),
             new  Ext.tree.TreeNode({text:'已删除的邮件',allowDrag: false })
        );
         // 创建表格的数据
         var  myData  =  [['张三','测试',' 2006 - 1 - 1 '],
                     ['李四','测试一',' 2006 - 5 - 6 '],
                     ['王五','测试二',' 2007 - 12 - 1 '],
                     ['刘六','测试三',' 2006 - 12 - 1 '],
                     ['张三','测试四',' 2007 - 6 - 1 '],
                     ['李四','测试五',' 2007 - 7 - 1 '],
                     ['刘六','测试六',' 2007 - 8 - 1 '],
                     ['张三','测试七',' 2007 - 9 - 1 '],
                     ['李四','测试八',' 2007 - 10 - 1 '],
                     ['王五','测试九',' 2007 - 11 - 1 '],
                     ['刘六','测试六',' 2007 - 8 - 1 ']];
        
         // 生成表格
         var  ds  =   new  Ext.data.Store({
            proxy:  new  Ext.data.MemoryProxy(myData),
            reader:  new  Ext.data.ArrayReader({},
                [{name:'sender'},
                   {name:'title'},
                   {name:'sendtime'}])
        });
        ds.load();
         var  colModel  =   new  Ext.grid.ColumnModel(
            [{header:'发送人',width: 100 ,sortable: true ,dataIndex:'sender'},
             {id:'title',header:'标题', width: 100 ,sortable: true ,dataIndex:'title'},
             {header:'发送时间',width: 75 ,sortable: true ,dataIndex:'sendtime'}
            ]);
            
         // 把以上的元素布局
         var  viewport  =   new  Ext.Viewport({
            layout:'border',
            items:[
                 new  Ext.BoxComponent({
                     region:'north',
                     el:'north - div',
                    tbar:tb,
                    height: 26
             }),
                 // 树型列表
                 new  Ext.tree.TreePanel({
                    region:'west',
                    contentEl:'west - div',
                    title:'树列表',
                    split: true ,
                    width:  200 ,
                    minSize:  175 ,
                    maxSize:  400 ,
                    collapsible:  true ,
                    margins:' 0   0   0   0 ',
                    root:root
             }),
             {
             region:'center',
             layout:'border',
             items:[
                     // 条目列表
                     new  Ext.grid.GridPanel({
                           region:'center',
                           el:'center - center',
                           title:'条目列表',
                           ds: ds,
                           cm: colModel,
                           autoScroll:  true
                    })
                     // 内容
                     /* *
                    {
                        region:'south',
                        contentEl:'center-south',
                        title:'内容',
                        split:true,
                        collapsible:true,
                        titlebar:true,
                        height:200,
                        minSize: 100,
                        maxSize:400,
                        collapsedTitle:'内容'
                     } */
                 ]
            },
             new  Ext.BoxComponent({
                 region:'south',
                 el:'south - div',
                 height: 24
            })]
        });
        root.expand()
             function  onItemClick(item){
                 alert(item.text);
        }
     });
     </ script >
     </ head >
     < body >
         < div  id ="north-div" >
             < div  id ='toolbar-div' ></ div >
         </ div >
         < div  id ="west-div" ></ div >
         < div  id ='center-center' ></ div >
         < div  id ='center-south' ></ div >
         < div  id ="south-div" ></ div >
     </ body >
</ html >