ext的Layout代码

ext的Layout代码

Ext.onReady( function () {
      Ext.state.Manager.setProvider( new  Ext.state.CookieProvider());
      Ext.Ajax.request({
           url :  " txn980301.do " ,
           method :  " get " ,
           success :  function (response, options) {
                  var  array  =  Ext.util.JSON.decode(response.responseText);
                  for  ( var  i  =   0 ; i  <  array.length; i ++ ) {
                       var  obj  =  array[i];
                      accordion.add({
                            id : obj.id,
                            title : obj.text,
                            html :  " <div   align=left valign=top    id= "   +  obj.id   +   " ></div> "
                      });
                      accordion.doLayout( true );
                      
                      buildTree(obj.id);
                 }
           }
      });

       var  tab  =   new  Ext.TabPanel({
           region :  " center " ,
           margins :  " 0 5 0 0 " ,
           deferredRender :  false ,
           activeTab :  0 ,
           resizeTabs :  true ,
           enableTabScroll :  true
      });

      tab.add({
           id :  " welcome " ,
           title :  " welcome " ,
           html :  " <hr><h1>hello world</h1> "
      });

       function  treeClick(node, e) {
            if  ( ! node.isLeaf()) {
                 e.stopEvent();
           }  else  {
                  var  n  =  tab.getComponent(node.id);
                  // alert(node['qtip']);
                 
                  if  ( ! n) {
                       var  n  =  tab.add({
                             " id "  : node.id,
                             " title "  : node.text,
                            closable :  true ,
                            html :  " <iframe  scroll='auto' src=txn "   +  node.id   +   " .do   style='width:100%;height:100%' ></iframe> "
                      });
                 }
                 tab.setActiveTab(n);
           }
      }

       function  buildTree(subMenuId) {
            var  root  =   new  Ext.tree.AsyncTreeNode({
                 text :  " Autos " ,
                 draggable :  false ,
                 id :  " source "
           });

            var  tree  =   new  Ext.tree.TreePanel({
                 el :  subMenuId ,
                 border :  0 ,
                 animate :  true ,
                 enableDD :  false ,
                 loader :  new  Ext.tree.TreeLoader({
                      dataUrl :  " txn980302.do?subMenuId= "   +  subMenuId,
                      requestMethod :  " GET "
                 }),
                 root : root,
                 rootVisible :  false ,
                 autoHeight :  true ,
                 containerScroll :  false ,
                 renderTo : subMenuId
           });

//            tree.render(subMenuId);
           root.expand();
           tree.on( " click " , treeClick);
      }

       var  header  =   new  Ext.Panel({
           region :  " north " ,
           margins :  " 0 5 0 5 " ,
           height :  80 ,
           collapsible :  true ,
           split :  true ,
           minSize :  80 ,
           maxSize :  80
      });

       var  status  =   new  Ext.Panel({
           region :  " south " ,
           margins :  " 0 5 5 5 " ,
           height :  20 ,
           minSize :  20 ,
           maxSize :  20 ,
           split :  true
      });

       var  accordion  =   new  Ext.Panel({
           region :  " west " ,
           margins :  " 0 0 0 5 " ,
           split :  true ,
           width :  210 ,
           layout :  " accordion " ,
           autoScroll :  true ,
           animCollapse :  false ,
           animate :  true ,
           layoutConfig : {
                 animate :  true
           }
      });

       var  viewport  =   new  Ext.Viewport({
           layout :  " border " ,
           items : [header, status, accordion, tab]
      });

});