ext例子代码和效果

//1.alert  Ext.MessageBox.alert('标题','阿古测试一把内容',function(btn){   alert('你刚刚点击了'+btn);  });

 

//2.confirm  Ext.MessageBox.confirm('选择框','阿古你到底是选择yes还是no?',function(btn){    alert('你刚刚点击了'+btn);   });   

//3.prompt  Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){   alert('你刚刚点击了'+btn+',刚刚输入了'+text);   });

//4.可以输入多行   Ext.MessageBox.show({    title:'多行输入框',   msg:'你可以输入好几行',   width:300,   buttons:Ext.MessageBox.OKCANCEL,   multiline:true,   fn:function(btn,text){    alert('你刚刚点击了'+btn+',刚刚输入了'+text);    }   });

//5.按钮给我们预设好得，很方便啊  Ext.MessageBox.show({   title:'随便按个按钮',   msg:'从三个按钮里随便选择一个',   buttons:Ext.MessageBox.YESNOCANCEL,   fn:function(btn){    alert('你刚刚点击了'+btn);    }   });

//6.进度条  Ext.MessageBox.show({   title:'进度条--请等待',   msg:'阿古读取数据中...',   width:240,   progress:true,   closable:false    });      //让进度条动起来  var f=function(v){    return function(){      if(v==11){       Ext.MessageBox.hide();      }else{       Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个，一共10个');      }     };   };    for(var i=1;i<12;i++){    setTimeout(f(i),i*1000);   } 

7

//********将点击的一段文本内容在弹出对话框显示     var paragraphClicked=function(E){    Ext.get(E.target).highlight();    //点击高亮显示    var paragraph=Ext.get(E.target);    paragraph.highlight();    Ext.MessageBox.show({     title:'Paragraph Clicked',     msg:paragraph.dom.innerHTML,  //将点击的一段文本内容在弹出对话框显示     width:400,     buttons:Ext.MessageBox.OK,     animEl:paragraph        });      }      Ext.select('p').on('click',paragraphClicked); 

8.//********Grid测试   var myData=[    ['Apple','male',29.89,0.24,0.81,'9/1 12:00am'],    ['Ext','female',83.81,0.28,0.34,'9/12 12:00am'],    ['Google','female',71.72,0.02,0.03,'10/1 12:00am'],    ['Microsoft','male',52.55,0.01,0.02,'7/4 12:00am'],    ['Yahoo!','female',29.01,0.42,1.47,'5/22 12:00am']    ];        var ds=new Ext.data.Store({     proxy:new Ext.data.MemoryProxy(myData),     reader:new Ext.data.ArrayReader({id:0},[     {name:'company'},     {name:'sex'},     {name:'price',type:'float'},     {name:'change',type:'float'},     {name:'pctChange',type:'float'},     {name:'lastChange',type:'date',dateFormat:'n/j h:ia'}     ])     });     ds.load();          var colModel=new Ext.grid.ColumnModel([  //   {header:'NO.',renderer:function(value,cellmenta,record,rowIndex){  //     return rowIndex+1;  //    }},      new Ext.grid.RowNumberer(),   //等同于以上写法     {header:"Company",width:120,sortable:true,dataIndex:'company'},     {header:"Sex",width:120,sortable:true,dataIndex:'sex',renderer:function(value){      if(value=='male'){        return "<span style=''color:red;font-weight:bold;'>红男</span><img src='a.jpg'/>";       }else{        return "<span style=''color:red;font-weight:bold;'>绿女</span><img src='d.gif'/>";       }            }},     {header:"Price",width:90,sortable:true,dataIndex:'price'},     {header:"Change",width:90,sortable:true,dataIndex:'change'},     {header:"% Change",width:90,sortable:true,dataIndex:'pctChange'},     {header:"Last Updated",width:120,sortable:true,renderer:Ext.util.Format.dateRenderer('m/d/y'),dataIndex:'lastChange'}                       ]);          var grid =new Ext.grid.GridPanel({el:'grid-example',ds:ds,cm:colModel});     grid.render();     grid.getSelectionModel().selectFirstRow();

PS:这个要在你测试的html中加入个div，id为grid-example，如下：

<div id="grid-example" style="overflow: hidden; width: 535px; height: 500px;border:2px solid #999;margin:20px 50px;"></div> 有个样式visibility:hidden;要去掉，不能不显示，我已经去掉了。

9.树

//创建树     var tree=new Ext.tree.TreePanel({el:'tree'      });     var root=new Ext.tree.TreeNode({text:'偶是根'});     var node1=new Ext.tree.TreeNode({text:'偶是根的第一个枝子'});      var node2=new Ext.tree.TreeNode({text:'偶是根的第一个枝子的第一个叶子'});     var node3=new Ext.tree.TreeNode({text:'偶是根的第一个叶子'});     node1.appendChild(node2);     root.appendChild(node1);     root.appendChild(node3);          tree.setRootNode(root);     tree.render();     root.expand(true,true);

PS：和表格一样，也要个div给其显示，id为tree.

<div id="tree" style="height:300px;"></div>