EXT에서 가장 많이 사용되는 레이아웃

5018 단어 htmljspext
본인은 프로젝트에서 이 레이아웃이 가장 많이 사용된다고 생각해서 (중국식 레이아웃이라고 할 수 있어) 적어서 참고하세요!!!

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']
                     
    ]; 

    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);

      }

 })

좋은 웹페이지 즐겨찾기