学步园

一、grid的例：

Javascript代码  

1. //配置表格列   
2. {header: "姓名", width: 50, dataIndex: 'name'},
     
3. {header: "组长", width: 50, dataIndex: 'leader', 
     
4.     xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列   
5.     trueText: '是',
     
6.     falseText: '否'  
7. },
     
8. {header: "生日", width: 100, dataIndex: 'birthday', 
     
9.     xtype : 'datecolumn',//Ext.grid.column.Date日期列   
10.     format : 'Y年m月d日'//日期格式化字符串   
11. },
      
12. {header: "薪资", width: 50, dataIndex: 'salary', 
      
13.     xtype: 'numbercolumn',//Ext.grid.column.Number数字列   
14.     format:'0,000'//数字格式化字符串   
15. }  

//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader', 
	xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
	trueText: '是',
	falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday', 
	xtype : 'datecolumn',//Ext.grid.column.Date日期列
	format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary', 
	xtype: 'numbercolumn',//Ext.grid.column.Number数字列
	format:'0,000'//数字格式化字符串
}

Javascript代码  

1. xtype: 'actioncolumn',//Ext.grid.column.Action动作列   
2. items: [{
     
3.     icon: 'images/edit.gif',//指定编辑图标资源的URL    
4.     handler: function(grid, rowIndex, colIndex) {
     
5.         //获取被操作的数据记录   
6.         var rec = grid.getStore().getAt(rowIndex);
     
7.         alert("编辑 " + rec.get('name'));
     
8.     }
     
9. },{
     
10.     icon: 'images/del.gif',//指定编辑图标资源的URL    
11.     handler: function(grid, rowIndex, colIndex) {
      
12.         var rec = grid.getStore().getAt(rowIndex);
      
13.         alert("删除 " + rec.get('name'));
      
14.     }                
      
15. },{
      
16.     icon: 'images/save.gif',//指定编辑图标资源的URL    
17.     handler: function(grid, rowIndex, colIndex) {