日期:2014-05-16  浏览次数:20442 次

EXT JS学习1
1 GRIDPANEL中,比如某列的返回值,用图片表示:
  renderer:function(value, metadata, record, rowIndex, colIndex, store){
}

value:原始值
metadata:可能的值为css或attr
record:Ext.data.Record,GridPanal的记录结构定义
rowIndex:行索引
colIndex:列索引
store:Ext.data.Store,数据源

   renderer: function(v){
if(v == "男"){
return "<img src='../imgs/GGgif'>";
}else{
return "<img src='../imgs/MM.gif'>";
}
}

2 //列模型
var cm = 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 == "男"){
return "<img src='../imgs/134.gif'>";
}else{
return "<img src='../imgs/133.gif'>";
}
}
},
{header: "生日", width: 100, format: "Y-m-d", dataIndex: "Birthday", renderer:

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

注意这里new Ext.grid.RowNumberer(),产生了一个序列号,
Ext.util.Format.dateRenderer("Y-m-d")},则产生了日期格式化

3
一个GRIDPANEL的例子:
  buttons: [{
text: "第一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectFirstRow();
}
},{
text: "上一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
if(!rsm.hasPrevious()){
Ext.Msg.alert("警告", "已到达第一行");
}else{
rsm.selectPrevious();
}
}
},{
text: "下一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
if(!rsm.hasNext()){
Ext.Msg.alert("警告", "已到达最后一行");
}else{
rsm.selectNext();
}
}
},{
text: "最后一行",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectLastRow();
}
},{
text: "全选"
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectAll();
}
},{
text: "全不选",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.deselectRange(0, grid.getView().getRows().length - 1);
}
},{
text: "反选",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
for(var i = grid.getView().getRows().length - 1; i >= 0; i --){
if(rsm.isSelected(i)){
rsm.deselectRow(i);
}else{
rsm.selectRow(i, true);//必须保留原来的,否则效果无法实现
}
}
}
}]
});

4 删除某行:
   {
text: "删除选定行",
icon: "../extjs/resources/images/default/dd/drop-no.gif",
cls: "x-btn-text-icon",
handler: function(){
var rsm = grid.getSelectionModel();//得到行选择模型
var view = grid.getView();
var store = grid.getStore();
for(var i = view.getRows().length - 1; i >= 0 ; i --){
if(rsm.isSelected(i)){
store.remove(store.getAt(i));
}
}
view.refresh();
}
}

5 删除所有行:
  var store = grid.getStore();
var view = grid.getView();
store.removeAll();
view.refresh();