extjs学习（关于grid）

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中
});