ExtJs 备忘录（8）—— 管理界面搭建和其他部分控件介绍-CSDN博客

一、管理界面[TreePanel、Viewport、layout-browser]

　　　　8.1.aspx

　　　　1.1　　效果截图

　　　　1.2　　实现代码

 
            
   // 
   标签页 
   
 
            
   var 
    tabs  
   = 
     
   new 
    Ext.TabPanel({
             region:  
   ' 
   center 
   ' 
   ,
             deferredRender:  
   false 
   ,
             margins:  
   ' 
   0 5 5 0 
   ' 
   ,
             activeTab:  
   0 
   ,
             defaults: {
                 closable:  
   true 
   ,
                 autoScroll:  
   true 
   
             },
             items: [{
                 title:  
   ' 
   首页 
   ' 
   ,
                 html:  
   ' 
   <b>欢迎您登陆系统</b> 
   ' 
   
             }]
         });

         Ext.onReady( 
   function 
   () {
             Ext.state.Manager.setProvider( 
   new 
    Ext.state.CookieProvider());

              
   function 
    createTree(iText) {
                  
   return 
     
   new 
    Ext.tree.TreePanel({
                     autoScroll:  
   true 
   ,
                     animate:  
   true 
   ,
                     border:  
   false 
   ,
                     rootVisible:  
   false 
   ,
                     root:  
   new 
    Ext.tree.TreeNode({
                         text: iText,
                         draggable:  
   false 
   ,
                         expanded:  
   true 
   
                     })
                 });
             }
 
   
              
   function 
    appendTreeNode(tree, tnId, iText, iUrl) {
                 tree.root.appendChild( 
   new 
    Ext.tree.TreeNode({
                     id: tnId,
                     text: iText,
                     listeners: {
                          
   ' 
   click 
   ' 
   :  
   function 
   (node, event) {
                             event.stopEvent();
                              
   var 
    n  
   = 
    tabs.getComponent(node.id);
                              
   if 
    ( 
   ! 
   n) {  
   // 
   //判断是否已经打开该面板    
   
 
                                   n  
   = 
    tabs.add({
                                      
   ' 
   id 
   ' 
   : node.id,
                                      
   ' 
   title 
   ' 
   : node.text,
                                     html:  
   ' 
   <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=" 
   ' 
     
   + 
    iUrl  
   + 
     
   ' 
   "></iframe> 
   ' 
   
                                      
   // 
   <div id="loading" style="font-size:8pt">正在加载...</div> 
   
 
                                        
   // 
   autoLoad:{url:iUrl, scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性    
   
 
                                   });
                             }
                             tabs.setActiveTab(n);
                         }
                     }
                 }));
             }
             
              
   // 
   人员管理 
   
 
                
   var 
    daTree  
   = 
    createTree( 
   " 
   人员管理 
   " 
   );
             appendTreeNode(daTree,  
   " 
   da1 
   " 
   ,  
   " 
   录入1 
   " 
   ,  
   " 
   /esayadd.aspx 
   " 
   );
             appendTreeNode(daTree,  
   " 
   da2 
   " 
   ,  
   " 
   录入2 
   " 
   ,  
   " 
   /esayadd.aspx 
   " 
   );
             appendTreeNode(daTree,  
   " 
   da3 
   " 
   ,  
   " 
   录入3 
   " 
   ,  
   " 
   /esayadd.aspx 
   " 
   );
             appendTreeNode(daTree,  
   " 
   da4 
   " 
   ,  
   " 
   录入4 
   " 
   ,  
   " 
   /esayadd.aspx 
   " 
   );

              
   // 
   审核管理 
   
 
                
   var 
    shTree  
   = 
    createTree( 
   " 
   自我管理 
   " 
   );
             appendTreeNode(shTree,  
   " 
   sh1 
   " 
   ,  
   " 
   录入1 
   " 
   ,  
   " 
   /esayadd.aspx 
   " 
   );
             appendTreeNode(shTree,  
   " 
   sh2 
   " 
   ,  
   " 
   录入2 
   " 
   ,  
   " 
   /esayadd.aspx 
   " 
   );

              
   var 
    viewport  
   = 
     
   new 
    Ext.Viewport({
                 layout:  
   ' 
   border 
   ' 
   ,
                 items: [
                  
   // 
   顶栏 
   
 
                    
   new 
    Ext.BoxComponent({
                     region:  
   ' 
   north 
   ' 
   ,
                     margins:  
   ' 
   0 5 0 5 
   ' 
   ,
                     el:  
   ' 
   north 
   ' 
   
                 }), {
                     region:  
   ' 
   west 
   ' 
   ,
                     id:  
   ' 
   west-panel 
   ' 
   ,
                     title:  
   ' 
   系统导航 
   ' 
   ,
                     split:  
   true 
   ,
                     width:  
   200 
   ,
                     minSize:  
   175 
   ,
                     maxSize:  
   400 
   ,
                     collapsible:  
   true 
   ,
                     margins:  
   ' 
   5 0 5 5 
   ' 
   ,
                     layout:  
   ' 
   accordion 
   ' 
   ,
                     layoutConfig: {
                         animate:  
   true 
   
                     },
                     defaults: { border:  
   false 
    },
                     items: [{
                             title:  
   " 
   人员管理 
   " 
   ,
                             items: [daTree]
                         }, {
                             title:  
   ' 
   自我管理 
   ' 
   ,
                             items: [shTree]
                         }]
                     }, 
                     tabs
                     ]
                 });
         }); 
  

　　　　代码说明：

　　　　　　a).　　这里封装了树形控件的创建和节点添加

二、其他控件

　　　　8.2.aspx

　　　　2.1　　先来张大合照

　　　　2.2　　实现代码

　　　　　　2.2.1　　下拉框、菜单[CycleButton、SplitButton]

 
                
   var 
    btn  
   = 
     
   new 
    Ext.CycleButton({
                 showText:  
   true 
   ,
                 prependText:  
   ' 
   View as  
   ' 
   ,
                 items: [{
                     text: 
   ' 
   text only 
   ' 
   ,
                     iconCls: 
   ' 
   view-text 
   ' 
   ,
                     checked: 
   true 
   
                 },{
                     text: 
   ' 
   HTML 
   ' 
   ,
                     iconCls: 
   ' 
   view-html 
   ' 
   
                 }],
                 changeHandler: 
   function 
   (btn, item){
                     Ext.Msg.alert( 
   ' 
   Change View 
   ' 
   , item.text);
                 }
             });
             
              
   // 
   二级菜单 
   
 
                
   var 
    sb  
   = 
     
   new 
    Ext.SplitButton({
                    text:  
   ' 
   二级菜单 
   ' 
   ,
                    menu:  
   new 
    Ext.menu.Menu({
                     items: [{
                         text:  
   ' 
   Item 1 
   ' 
   ,
                         menu: 
   new 
    Ext.menu.Menu({
                             items: [
                                 {text:  
   ' 
   Item 3 
   ' 
   },
                                 {text:  
   ' 
   Item 4 
   ' 
   }
                             ]
                            })
                     }]
                    })
             }); 
  

　　　　　　2.2.2　　调色板[ColorPalette]

 
                
   // 
   调色板 
   
 
                
   var 
    cp  
   = 
     
   new 
    Ext.ColorPalette({
                 value: 
   ' 
   993300 
   ' 
   ,        
   // 
   默认值 
   
 
                   listeners: {
                      
   ' 
   select 
   ' 
   : 
   function 
   (palette, selColor){
                         Ext.Msg.alert( 
   ' 
   颜色 
   ' 
   , selColor);
                     }
                 }
             });   
  

　　　　　　2.2.3　　滑动条[Slider]

 
                
   // 
   滑动条 
   
 
               
   var 
    slider  
   = 
     
   new 
    Ext.Slider({
                 width:  
   200 
   ,
                 value:  
   50 
   ,
                 increment:  
   10 
   ,
                 minValue:  
   0 
   ,
                 maxValue:  
   100 
   
             }); 
  