Ext JS 控件

１、Panel面板的概述　　

面板Panel是ExtJS控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。

２、面板的5大组成部分

面板由以下几个部分组成，一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。

  面板的类名为Ext.Panel，其xtype为panel，下面的代码可以显示出面板的各个组成部分：

  Ext.onReady(function(){
  new Ext.Panel({
  renderTo:"hello",
  title:"面板头部header",
  width:300,
  height:200,
  html:'<h1>面板主区域</h1>',
  tbar:[{text:'顶部工具栏topToolbar'}],
  bbar:[{text:'底部工具栏bottomToolbar'}],
  buttons:[{text:"按钮位于footer"}]
  });
   });

  一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码：

  Ext.onReady(function(){
  new Ext.Panel({
  renderTo:"hello",
  title:"hello",
  width:300,
  height:200,
  html:'<h1>Hello,easyjf open source!</h1>',
  tbar:[{pressed:true,text:'刷新'}] 
  });
   });

 

３、面板的特点

面板Panel主要有下面几个特点：

  1、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包含了特定的样式信息；

  2、面板Panel继承自Container类，因此，面板是一个可视化容器组件；也是其它大多数可视化控件如TabPanel、Window、TreePanel的基类；

  3、面板中即可包括其它元素组件，也可以包含特定html代码片段，可以在程序中动态更新面板中的内容；

  4、面板由固定的5个部分组成，除了body部份以外，其它部分都不是必须的。

４、面板中的元素

　　如果要在面板中放置Ext组件或控件元素，则可以通过面板的items属性来指定，这个属性的值可以是一个数组，表示面板中有很多子元素，也可以是一个对象，表示面板中只定义一个子元素。当面板对象创建以后，可以通过面板容器的add、insert来动态往面板中增加子元素，用remove方法来在面板动态删除子元素。

5、面板中的HTML内容

面板中的内容也可以是指定的html片段，此时可以通过配置选项中html属性来指定。比如下面的代码：

Ext.onReady(function(){
  var panel=new Ext.Panel({
  title:"面板",
  width:500,
  height:300,
  html:"<h1><font color='blue'>这是Ext的面板</font></h1>"
  });
  panel.render("test");
});
 

  当然，如果面板中的html比较复杂，比如是说是一个动态页面的内容。此时可以通过在配置选项中设置autoLoad配置选项来指定自动加载指定url中的内容作为面板中显示的内容。比如下面的代码：

  var panel=new Ext.Panel({
  title:"面板",
  width:500,
  height:300,
  autoLoad:{url:"index.html"}
  });
 

  也可以在对象初始化以后，动态更新面板中的html内容，可以通过调用面板的load方法实现，load方法中的参数与autoLoad配置选项中所代表的一样，代码如下：

  panel.load({
   url:"index.ejf",
   params:{name:"daxia",pwd:"123"},
   scope: this,
      discardUrl: false,
      nocache: false,
      text: "正在加载，请稍候...",
      timeout: 30,
      scripts: true
  });

 

６、面板中html内容的动态控制

　　这时候直接通过面板的body元素来实现面板的内容的更新。比如下面的代码：

  panel.body.update("<h1><font color='blue'>这是Ext的面板</font></h1>",true,function(){});

　　update的第一个参数表示要更新的html字符串，第二个参数表示是否执行字符串中的脚本，第三个参数是指当内容已经更新完成后执行的回调函数。

简单解读Panel API中每一个重要的特性。

1. Ext.onReady(function(){
       var btn = new Ext.Button({text:"按钮1"});
       var panel = new Ext.Panel({
           width:500,
           height:400,
           title: "我的面板",
           tbar:[{text:"保存"},"-",{text:"关闭"}],// 顶部工具栏
           bbar:[{text:"添加内容",handler:function(){
               panel.add({title:"面板2"});
               var p2 = panel.getComponent(2);
               alert(p2.title);
               panel.remove(p2);
               panel.doLayout();
               alert("添加成功!");
           }},{text:"下一页"}],
           buttonAlign:"center",
           buttons:[{text:"确定"},{text:"取消"}],
           //html:"<h1>这里是面板的body区域</h1>"
           //autoLoad: "news.html" //面板内容可以是单独的html,jsp
           items:[btn,{xtype:"button", text:"按钮2"},{title:"面板3"}], //面板里面还可以放其他组件
       });
       //参数是将面板放到哪个位置，可以是id的字符串，或dom节点，或者是Ext.get返回的一个Element
       //放置到id=p的div里面
       panel.render("p");
   });
   

2. var panel;
   

3. 
   

4. //更新面板里面的页面
   

5. function updatePanel1(){
       panel.load("index.jsp");
   }
   
   function updatePanel2(){
       //更新面板的内容
       panel.body.update("<h1>新的内容</h1>"+new Date());
   }
   Ext.onReady(function(){
       var btn = new Ext.Button({text:"按钮1"});
       panel = new Ext.Panel({
           width:500,
           height:400,
           collapsible:true,    //给面板添加收缩功能
           tools: [{id:"save"},{id:"print",handler:function(){window.print()} }],//id是固定的，查api
           title: "我的面板",
           tbar:[{text:"保存"},"-",{text:"关闭"}],// 顶部工具栏
           bbar:[{text:"加载html页面",handler:function(){
               panel.load("news.html");
           }},{text:"加载jsp页面",handler:function(){
               updatePanel1();
           }},{text:"动态更新", handler:function(){
               updatePanel2();            
           }
           }],
           buttonAlign:"center",
           buttons:[{text:"确定"},{text:"取消"}],
           autoLoad: "news.html" //面板内容可以是单独的html,jsp
       });
       //参数是将面板放到哪个位置，可以是id的字符串，或dom节点，或者是Ext.get返回的一个Element
       //放置到id=p的div里面
       panel.render("p");
   });