Extjs 主页模板

最新推荐文章于 2018-07-24 13:14:37 发布

原创最新推荐文章于 2018-07-24 13:14:37 发布 · 715 阅读

CC 4.0 BY-SA版权

文章标签：

#extjs #autoload #border #tabs #function #tree

Ext.onReady(function(){
               var tabs=new Ext.TabPanel({
                    title:'主要内容',
                    region:'center',
                    margins:'3 3 3 0',
                    defaults:{autoScroll:true},
                    items:[{
                         title:'首页',
                         bodyStyle:"background-image:url(/image/desk.jpg)",
                         html:'<div><center><h1>欢迎来到校园!</h1></center></div>'
                    }]
               });
               tabs.activate(0);
              var tree=new Ext.tree.TreePanel({
                 title:'导航栏',
                 region:'west',
                 split:true,
                 border:true,
                 collapsible:true,
                 width:120,
                 minSize:80,
                 maxSize:200,
                 margins:'3 0 3 3',
                 cmargins:'3 3 3 3'
              });
              var root=new Ext.tree.TreeNode({text:'我是根'});
              tree.setRootNode(root);
              var node1=new Ext.tree.TreeNode({text:'根一asdfasdfasfd'});
              var node2=new Ext.tree.TreeNode({text:'根二adfasfasfd'});
              var node3=new Ext.tree.TreeNode({text:'根三asdfasdff'});

              node1.appendChild(node2);
              root.appendChild(node1);
              root.appendChild(node3);
             //tree on
             tree.on("click",function(node){
                // Ext.log("you clicked the node:"+node);//加入右键菜单
                  var t=tabs.add({
                         id:Ext.id(),
                         closable:true,
                         title:'你是谁'+Ext.id(),
                         autoLoad : {//注意这里的autoLoad,有这个，一般都会出个莫明的错，那是因为你多引入重复的.js
                                url : '/example/tabPanel.jsp',
                                scope :this,
                                scripts : true,
                                text : '页面加载中,请稍候....'
                         }
                   });

                  tabs.setActiveTab(t);//显示刚出来的tab，这样用很灵活
            });
             var win=new Ext.Viewport({
                   title:'复杂布局',
                   closable:true,
                   width:800,
                   height:600,
                   border:false,
                   layout:'border',
                   items:[tree,tabs]
               });
               win.show();
          });