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>