1.想要调整某一列在表格中的顺序，可以使用mapping(索引是从0开始的)
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id',mapping:1},
{name:'name',mapping:0},
{name:'descn',mapping:2}
]}
);
2、想让表格拥有斑马线的效果：加上stripeRows:true（默认为false）
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
stripeRows:true,
store : store,
columns : columns
});
3、想让 grid拥有和表格一样的border：加上 columnLines : true
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
stripeRows:true,
columnLines : true,
store : store,
columns : columns
});
4.读取数据时，使用遮罩效果，加上：loadMask:true(默认为false)
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
stripeRows:true,
columnLines : true,
loadMask:true,
store : store,
columns : columns
});
5.禁止拖放列和改变列的宽度，把enableColumnMove和 enableResize设置为false
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
stripeRows:true,
columnLines : true,
loadMask:true,
enableColumnMove:false,
enableResize : false,
store : store,
columns : columns
});
6.允许按列进行排序，只需加上sortable:true
var columns = [
{header:'编号',dataIndex:'id',sortable:true},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
];
7.extjs中grid的中文排序
为了让表格实现中文排序的功能，我们需要重写Ext.data.Store的createComparator()函数，代码如下：
Ext.data.Store.prototype.createComparator = function(sorters){
return function(r1,r2){
var s = sorters[0], f=s.property;
var v1 = r1.data[f], v2 = r2.data[f];
var result = 0;
if(typeof(v1)=="string"){
result = v1.localeCompare(v2);
if(s.direction=='DESC'){
result *=-1;
}
}else{
result = sorters[0].sort(r1,r2);
}
var length = sorters.length;
for(var i = 1; i<length ; i++){
s= sorters[i];
f = s.property;
v1= r1.data[f];
v2 = r2.data[f];
if(typeof(v1)=="string"){
result = result || v1.localeCompare(v2);
if(s.direction == 'DESC'){
result *=-1;
}
}else{
result = result||s.sort.call(this,r1,r2);
}
}
return result;
};
};
以上代码重写了Ext.data.Store的comparator()函数，使其支持中文排序。可以将这段代码加到ext-all.js文件最后，或者放到HTML页面的做上面，总之是要在Ext初始化之后，实际代码调用之前执行。
8.表格的渲染
加入一个表格中有性别那一列，如果性别是女则显示绿色的，是男则显示红色的，该怎么实现呢？下面给出解决方案：
var columns = [{header:'编号'，dataIndex:'id'},
{header:'性别'，dataIndex:'sex',renderer:function(value){
if(value=='male'){
return "<span style='color:red';font-weight:bold;'>红男</span>";
} else{
return "<span style='color:green';font-weight:bold;'>绿女</span>";
}
}},
{header:'名称'，dataIndex:'name'},
{header:'描述'，dataIndex:'descn'}
];
可以看出在columns里增加了renderer属性，renderer的值是一个自定义函数，不过这样代码看起来显得很乱，所以做了一下修改：
function renderSex(value){
if(value=='male'){
return "<span style='color:red';font-weight:bold;'>红男</span><img src='user_male.png'/>";
} else{
return "<span style='color:green';font-weight:bold;'>绿女</span><img src='user_female.png'/>";
}
}
var columns =[{header:'编号'，dataIndex:'id'},
{header:'性别'，dataIndex:'sex',renderer:renderSex}},
{header:'名称'，dataIndex:'name'},
{header:'描述'，dataIndex:'descn'}
];
9.表格中加复选框
（1）首先创建一个sm,也就是CheckboxModel(),代码如下：
var sm = new Ext.selection.CheckboxModel({checkOnly:true});
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
store : store,
columns : columns,
selModel:sm
});
10.如何得到表格选中的数据
var selected = Ext.getCmp("IdeifGrid").getSelectionModel().selected; //其中IdeifGrid是gridPanel的id
var selected = grid.getSelectionModel().selected;//其中grid是var的一个参数
for(var i=0;i<selected.getCount();i++){
var record = selected.get(i);
Ext.Msg.alert('提示',record.get("id")+","+record.get("name")+","+record.get("descn"));
};
11.从数据库读取数据store定义：
var URL_Path= "ideIf/queryAll";
var store = Ext.create('Ext.data.Store', {
fields : [ 'ideNm', 'ideNo','opt' ],
proxy : {
type : 'ajax',
url : URL_Path,
reader : {
root : 'items',// JSON数组对象名
totalProperty : 'totalCount'// 数据集记录总数
}
},
pageSize : 15, // 设置每个页面有十条数据
autoLoad : false
});
12.数据较多，实现表格的分页：(如果想让分页工具条显示在顶部，可以讲bbar换成tbar)
var toolbarPaging=Ext.create('Ext.PagingToolbar',
{
autoDestroy : false,
store : store,
displayInfo : true,
beforePageText : '第',
afterPageText : '页',
displayMsg : '显示 {0} - {1} 条，共计 {2} 条',
emptyMsg : "没有数据显示",
plugins : [
new Ext.ux.plugin.PagingToolbarResizer({
options : [ 15, 30, 45, 60, 75 ],
prependCombo : false
}),
new Ext.ux.ProgressBarPager({ progBarWidth : 198 })
]
}) ;
在grid中加入bbar属性：
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
store : store,
columns : columns,
selModel:sm,
bbar:toolbarPaging
});
13.表格分页之后有可能第二页的序号错乱，解决方案如下：
1.写一个渲染表格的方法，如下：
function renderNum(value,metadata,record,rowIndex){
var record_start = 0;
var store = store;
//store当前页数
var currentPage = store.currentPage;
//store每页显示数
var pageSize = store.pageSize;
if(pageSize>1){
record_start = (currentPage-1)*pageSize;
}
return record_start + 1 + rowIndex;
}
2.在column中的序号列加上：renderer：renderNum
var columns = [
{text:'编号',dataIndex:'id',xtype : 'rownumberer',renderer：renderNum},
{header:'名称',dataIndex:'ideNm'},
{header:'描述',dataIndex:'ideNo'},
{text:'操作',dataIndex:'opt',renderer:function(){
return "<a>操作</a>";
}}
];
14.可编辑表格控件
1.加入可编辑控
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'grid',
store : store,
columns : columns,
selModel:sm,
bbar:toolbarPaging,
plugins:[
Ext.create('Ext.grid.plugin.CellEditing',{
clickToEdit:1
})
]
});
2.在columns中加入editor:{allowBlank:false},如下：
var columns = [
{
text:'编号',
dataIndex:'id',
xtype : 'rownumberer',
renderer：renderNum,
editor:{allowBlank:false}
},
{header:'名称',dataIndex:'ideNm'},
{header:'描述',dataIndex:'ideNo'},
{text:'操作',dataIndex:'opt',renderer:function(){
return "<a>操作</a>";
}}
];
15.添加一行/删除一行
1.先在grid中加上tbar
tbar:['-',{
text:'添加一行',
handler:function(){
var p = {
id:'',
ideNo:'',
ideNm:'',
opt:''
};
store.insert(0,p);
}
},'-',{
text:'删除一行',
handler:function(){
Ext.Msg.confirm('信息'，‘确定要删除吗？’,function(btn){
if(btn=='yes'){
var sm = grid.getSelectionModel();
var record = sm.getSelection()[0];
store.remove(record);
}
})
}
}]
16.既然15已经进行了添加和删除表格数据，这时我们需要对表格的数据进行保存，怎么保存呢，下面给出方法：
{
text:'保存',
handler:function(){
var m = store.getModifiedRecords().slice(0);//slice(start,(end));遍历数组
var jsonArray = [];
Ext.each(m,function(item){
jsonArray.push(item.data);
});
Ext.Ajax.request({
method : 'POST',
url:'11_03.jsp',
success:function(response){
Ext.Msg.alert('信息'，response.responseText,function(){
store.reload();
})
},
failure:function(){
Ext.Msg.alert("错误","与后台交互的时候出现了问题")；
},
params:'data='+encodeURIComponent(Ext.encode(jsonArray))
})
}
}
17.可编辑表格怎么控制输入数据的类型：下面给出方法：
eg:表格有四列，第一列只能填写数字，第二列是下拉框，第三列是日期，第四列是单选框(下面的store是写死的数据)
var comboData = [['0','新版ext教程'],['1','ext在线支持'],[2','ext扩展']];
var columns = [{
header:'数字列',
dataIndex:'number',
editor : new Ext.form.NumberField({
allowBlank : false,//不允许为空
allowNegative : false,//不允许输入负号
maxVlue : 10 //最大值
},
{
header:'选择列',
dataIndex:'combo',
editor : new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ['value','text'],
data : comboData
}),
emptyText : '请选择',
mode : 'local' ,
triggerAction : 'all' ,
valueField : 'value',
displayField : 'text',
editable : false
}) ,
renderer : function(value){
return comboData[value][1];
}
)
},{
header : '日期列',
dataIndex : 'data',
editor : new Ext.form.DateField({
format : 'Y-m-d',
minValue : '2007-12-14',
disabledDays:[0,6],//周六周日不能选择
disabledDaysText : '只能选择工作日'
}),
renderer : function(value){
return Ext.Data.format(value,"Y-m-d");
}
},{
header : '判断列',
dataIndex : 'check',
editor : new form.Checkbox({
allowBlank : false
}),
renderer : function(value){
return value ? '是' : '否'；
}
}]
store中的数据从数据库中获取
var store = new Ext.data.ArrayStore({
fields : [ 'cdNm', 'cdVl' ],
proxy : {
type : 'ajax',
url : "code/query/typ/IDE_STS",
params : {
_method : 'get'
},
reader : {
root : 'items'
}
},
autoLoad : false
});
设置默认值：
store.load({
callback : function(records, options, success) {
//ideStore.insert(0,[{cdNm : '全部',cdVl : ''}])
ideStore.each(function(record) { //加载完毕执行的回调函数
if (record.get('cdNm') == "启用") { //机构状态默认值为冻结
Ext.getCmp('IDESts').setValue(record);
}
});
},
scope : store, //指定回调函数执行时的作用域
add : false //为true时，load()得到的数据会添加在原来的store数据末尾，否则会先清除之前的数据再将得到的数据添加到store中
});