Extjs

使用：
 1.引入Ext的样式文件
 <link rel="stylesheet type="text/css" href="ext-3.2.1/resources/css/ext-all.css"/>
 2.引入Ext的脚本库（两个）
  底层驱动：
  <script src="ext-3.2.1/adapter/ext/ext-base.js"></script>
  引入ext-all:
  <script src="ext-3.2.1/ext-all.js"></script>
 3.启动：
 1.显示窗口
 Ext.onReady(function(){
  var win=new Ext.Window({
   width:500,
   height:600,
   title:"第一个窗口",
   buttons:[{text:"确定"},{text:"取消"}]
  });
  win.show();
 });
 2.显示tree
 
 var tree=new Ext.tree.TreePanel({
   title:"树的测试",
   width:500,
   height:300,
   root:new Ext.tree.AsyncTreeNode){
   text:"根节点",
   children:[{
    text:"子节点1",
    children:[{text:"孙节点1",leaf:true},{text:"子节点2",leaf:true}]
    });
    
  tree.on("render",function(){
   alert("树节点显示了");
  });
  
  tree.render("hello");
  
 3.事件：
 Ext.get("id").on("click",function(e){});
组件：
 1.Observable 所有事件继承Observable
 2.Component 所有组件都继承Component
 3.BoxComponent 继承Component增加了一些属性
 4.Container 继承BoxComponent容器
 5.Panel
 
面板：
  顶部：tbar工具栏
  底部：bblar工具栏
  底部区域：buttons
  头部：title
  body:html或者autoLoad
  
  var panel=new Ext.Panel({
   width:500,
   height:400,
   tbar:[{text:"保存"},"",{text:"关闭"}],
   bbar:[{text:"上一页"},{text:"下一页"}],
   title:"Panel",
   buttons:[{text:"确定"},{text:"取消"}],
   buttonAlign:"right",
   html:"",
   autoload:"url",
   items:[{xtype:"button",text:"按钮2"},{title:"Panel2",border:false}],//默认items里面放Panel
   }
   
viewPort:
   
   
window:
    closeAction:"hide"(默认：close)
   
对话框：
    Ext.MessageBox(别名：Ext.Msg)
     alert，
     confirm：获取点击结果，回调函数返回Ext.MessageBox对象，function(btn){}//btn="YES"/"NO"
     prompt：
      prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
     wait:hide消失
     progress:
     show:自定义
    注意：对话框同一时间只能显示一个
布局：
 column:按列排（cloumnWidth）
 border:
 fit:
 accordion:
 
tablePanel:
gridPanel:
  columns:元素中可以配置：editor属性：new Ext.form.TextField();
           new Ext.form.DateField();
editorGridPanel:ext4没有
propertyGridPanel: