EXTJS学习1

1 GRIDPANEL中&＃xff0c;比如某列的返回值&＃xff0c;用图片表示&＃xff1a;

renderer&＃xff1a;function(value, metadata, record, rowIndex, colIndex, store){

}



value&＃xff1a;原始值

metadata&＃xff1a;可能的值为css或attr

record&＃xff1a;Ext.data.Record&＃xff0c;GridPanal的记录结构定义

rowIndex&＃xff1a;行索引

colIndex&＃xff1a;列索引

store&＃xff1a;Ext.data.Store&＃xff0c;数据源



renderer: function(v){

if(v &＃61;&＃61; "男"){

return "";

}else{

return "";

}

}



2 //列模型

var cm &＃61; new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(),

{header: "姓名", width: 80, dataIndex: "Name", tooltip: "这是您的姓名"},

{header: "性别", width: 40, dataIndex: "Sex", align: "center",

renderer: function(v){

if(v &＃61;&＃61; "男"){

return "";

}else{

return "";

}

}

},

{header: "生日", width: 100, format: "Y-m-d", dataIndex: "Birthday", renderer:



Ext.util.Format.dateRenderer("Y-m-d")},



注意这里new Ext.grid.RowNumberer(),产生了一个序列号&＃xff0c;

Ext.util.Format.dateRenderer("Y-m-d")},则产生了日期格式化



3

一个GRIDPANEL的例子&＃xff1a;

buttons: [{

text: "第一行",

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

rsm.selectFirstRow();

}

},{

text: "上一行",

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

if(!rsm.hasPrevious()){

Ext.Msg.alert("警告", "已到达第一行");

}else{

rsm.selectPrevious();

}

}

},{

text: "下一行",

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

if(!rsm.hasNext()){

Ext.Msg.alert("警告", "已到达最后一行");

}else{

rsm.selectNext();

}

}

},{

text: "最后一行",

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

rsm.selectLastRow();

}

},{

text: "全选"

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

rsm.selectAll();

}

},{

text: "全不选",

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

rsm.deselectRange(0, grid.getView().getRows().length - 1);

}

},{

text: "反选",

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

for(var i &＃61; grid.getView().getRows().length - 1; i >&＃61; 0; i --){

if(rsm.isSelected(i)){

rsm.deselectRow(i);

}else{

rsm.selectRow(i, true);//必须保留原来的&＃xff0c;否则效果无法实现

}

}

}

}]

});



4 删除某行&＃xff1a;

{

text: "删除选定行",

icon: "../extjs/resources/images/default/dd/drop-no.gif",

cls: "x-btn-text-icon",

handler: function(){

var rsm &＃61; grid.getSelectionModel();//得到行选择模型

var view &＃61; grid.getView();

var store &＃61; grid.getStore();

for(var i &＃61; view.getRows().length - 1; i >&＃61; 0 ; i --){

if(rsm.isSelected(i)){

store.remove(store.getAt(i));

}

}

view.refresh();

}

}



5 删除所有行&＃xff1a;

var store &＃61; grid.getStore();

var view &＃61; grid.getView();

store.removeAll();

view.refresh();