EXT-Panel的用法

面板的类名：Ext.Panel。下面的代码记录的是Panel的各个属性：

但是按钮一般不会添加在那块，可以把它添加到工具条里。

只需要给工具条中添加一个属性：pressed:true 即可

 

面板的工具栏：

只需要添加一个tools属性即可：

这里展示了Ext预定义的工具栏：保存，帮助，关闭三种。handler为对应的绑定的函数。

下面添加自定义工具栏：

可以看见底部增加了两个按钮。

关于xtype详见：http://blog.csdn.net/ldl22847/article/details/7236474

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

一直都是将Panel渲染到div上。ViewPort代表浏览器显示的区域，渲染在body内，大小随浏览器。

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

 

一个类似于html中frameset框架的组合面板：

 Ext.onReady(function(){ 
       new Ext.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"}] 
              } 
            ] 
        }); 
       });