Extjs组件的介绍---面板

Extjs组件的介绍---面板Panel

 

组件的例子：

(function(){
    Ext.onReady(function(){
       //介绍面板
       Ext.create("Ext.panel.Panel",{
           renderTo:'pan',//依附于哪里
           title:'面板头部header',
           width:300,
           height:200,
           html:'面板主区域',
           tbar:[{text:'顶部工具栏 topToolbar'}],
           bbar:[{text:'底部工具栏 bottonToobar'}]
       });
    });
})();

 

效果为：

 

当把顶部的工具栏上换为：

tbar:[{pressed:true,text:'刷新'}]

 

在面板中加入一个tools工具类，可以增加组件的使用

(function(){
    Ext.onReady(function(){
       //介绍面板
       Ext.create("Ext.panel.Panel",{
           renderTo:'pan',//依附于哪里
           title:'hello',
           width:300,
           height:200,
           html:'<h1>hello world</h1>',
           tools:[
           {id:'save'},
           {id:'help',handler:function(){
                 Ext.Msg.alert('help','pleaseHelpMe!') 

              }
           },
           {id:'close'},
        ],
           tbar:[{pressed:true,text:'刷新'}]
       });
    });
})();

 

其中我们可以看出我们在？，即在帮助的按钮上加了一个handler，当点击帮助的时候，会执行此函数

 

 

选项面板  TabPanel ---- VeiwPort

VeiwPort是代表整个浏览器显示区域，该对象渲染到页面的body区域中，并伴随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例

举例：

(function(){
    Ext.onReady(function(){
       Ext.create("Ext.container.Viewport",{
           enableTabScroll:true,
           layout:'fit',
           items:[{
              title:'panel',
              html:'',
              bbar:[
                  {text:'按钮1'},
                  {text:'按钮2'}
              ]
           }]
       });
    });
})();

它充满了整个浏览器的页面，所以它主要应用于程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序界面，在ViewPort上常用的布局有fit、border等，当然在需要的时候其他布局也会常用

让我们开一个视觉的享受吧！

 

举例：

(function(){
    Ext.onReady(function(){
       Ext.create("Ext.container.Viewport",{
           enableTabScroll:true,
           layout:'border',//布局
           items:[{
                  title:'面板',
                  region:'north',
                  height:50,
                  html:'<h1>网站后台管理系统</h1>',
              },
              {
                  title:'菜单',
                  region:'west',
                  width:200,
                  collapsible:true,
                  html:'菜单栏'
              },
              {
                  xtype:'tabpanel',
                  region:'center',
                  items:[
                     {title:'面板1'},
                     {title:'面板2'}
                  ]
              }
           ]
       });
    });
})();

 

在面板中加入文本框

举例：

(function(){
    Ext.onReady(function(){
       Ext.create("Ext.panel.Panel",{
           id:'viewport',
           title:'第一个xtype应用程序',
           width:200,
           height:300,
           items:[
              {xtype:'textfield',fieldLabel:'用户名'},
              {xtype:'textfield',fieldLabel:'姓名'},
              {xtype:'textfield',fieldLabel:'性别'},
              {xtype:'datefield',fieldLabel:'图片'},//效果出不来
              {xtype:'button',text:'第一个按钮'}
           ],
           tbar:[
              {xtype:'button',text:'顶部'}
           ],
           bbar:[
              {xtype:'button',text:'底部'}
           ],
           tools:[
              {id:'help',handler:function(){
                     Ext.Msg.alert('help','pleaseHelpMe!') 
                  }
              },
              {id:'refresh',hidden:true,handler:function(){
                    
                  }
              },
              {id:'search',handler:function(event, target, owner, tool){
                     owner.child('#refresh').show();
                  }
              }
             
           ],
           renderTo:'xt'
       });
    });
})();