Ext Js 关于GridPanel---EditorGridPanel

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(); 


6 grid中，在单元格中显示文字，图等 
  var cm = new Ext.grid.ColumnModel([ 
        {header:'产品编号',dataIndex:'product_id'}, 
        {header:'产品名称',dataIndex:'product_name'}, 
        {header:'产品价格',dataIndex:'product_price',renderer:renderColor} 
    ]); 

    function renderColor(value) 
    { 
if(value >= 1000) 
{ 
return "<span style='color:red;font-weight:bold'>" + value + "</span>"; 
} 
else 
{ 
return "<span style='color:blue'>" + value + "</span>"; 
} 
    } 

  如果获得单元格更详细信息： 
    var cm = new Ext.grid.ColumnModel([ 
        {header:'产品编号',dataIndex:'product_id'}, 
        {header:'产品名称',dataIndex:'product_name'}, 
        {header:'产品价格',dataIndex:'product_price'}, 
        {header:'详细信息',dataIndex:'msg',width:130, renderer:renderMsg} 
    ]); 
    function renderMsg(value, cellmeta, record, rowIndex, columnIndex, store) 
    { 
        
return "<input type='button' value='显示详细信息' οnclick='alert(/"" + 
"产品名称：" + record.get('product_name') + "//n" + 
"当前行：" + rowIndex + "//n" + 
"当前列：" + columnIndex + "//n" + 
"当前单元格的css：" + cellmeta.css + 
"/")'/>"; 
    } 


7 复选框加上JAVASCRIPT判断全选等 
   <script type="text/javascript"> 
var gridPanel; 
var sm; 
var cm; 
var store; 
Ext.onReady(function(){ 

    sm = new Ext.grid.CheckboxSelectionModel(); 
    cm = new Ext.grid.ColumnModel([ 
sm, 
        {header:'产品编号',dataIndex:'product_id'}, 
        {header:'产品名称',dataIndex:'product_name'}, 
        {header:'产品价格',dataIndex:'product_price'} 
    ]); 
    var data = [ 
        ['01','自行车','320'], 
        ['02','电脑','3500'], 
        ['03','手机','1200'], 
        ['04','衬衫','238'], 
        ['05','羽绒服','658'] 
    ]; 

    store = new Ext.data.Store({ 
        proxy: new Ext.data.MemoryProxy(data), 
        reader: new Ext.data.ArrayReader({}, [ 
            {name: 'product_id'}, 
            {name: 'product_name'}, 
            {name: 'product_price'} 
        ]) 
    }); 
    store.load(); 


    gridPanel = new Ext.grid.GridPanel({ 
        autoHeight: true, 
        renderTo: 'grid',        
        store: store, 
        cm: cm, 
        sm: sm 
    }); 

}); 
function deleteCheckedRow() 
{ 
for ( var i = store.getCount(); i >= 0 ; i--) { 
if (sm.isSelected(i)) 
store.removeAt(i);
} 
    
    gridPanel.reconfigure(store, 
    cm); 
} 
        </script>  


8 表格分页： 
    A 简单分页 
      var gridPanel = new Ext.grid.GridPanel({ 
        renderTo: 'grid', 
        autoHeight: true, 
        store: store, 
        cm: cm, 
        bbar: new Ext.PagingToolbar({           
            pageSize: 20, 
            store: store,        
            displayInfo: true, 
            displayMsg: '显示记录 {0} - {1} of {2}', 
            emptyMsg: "没有记录" 
        }) 
    }); 
    store.load(); 
//如果用tbar，则会显示在顶部，工具条 
B 服务端的分页原理： 
   1）后端构建json的分页串，比如： 
      String start = request.getParameter("start"); 
String limit = request.getParameter("limit"); 

int index = Integer.parseInt(start); 
int pageSize = Integer.parseInt(limit); 
int total = 100000; 
String jsonStr = "{total:" + total + ",root:["; 
for (int i = index; i < pageSize + index; i++) 
{ 
int productIndex = i + 1; 
jsonStr += "{product_id:" + productIndex + ",product_name:'产品" 
+ productIndex + "',product_price:'价格" + productIndex 
+ "'}"; 
if (i != pageSize + index - 1) 
jsonStr += ","; 
} 
jsonStr += "]}"; 
out.println(jsonStr); 
然后STORE中解析： 
    var store = new Ext.data.Store({ 
                                  proxy: new Ext.data.HttpProxy({url:'PaginationDataServlet'}), 
                                      reader: new Ext.data.JsonReader({ 
                                          totalProperty: 'total', 
                                          root: 'root' 
                                      }, [ 
                                          {name: 'product_id'}, 
                                          {name: 'product_name'}, 
                                          {name: 'product_price'} 
                                      ]) 
                                  }); 
                                 store.load({params:{start:0,limit:10}}); 



9 可编辑的表格 
      var gridPanel = new Ext.grid.EditorGridPanel({ 
                autoHeight: true, 
                renderTo: 'grid',        
                store: store, 
                cm: cm 
               clicksToEdit;1,//如果要单击单元格就显示文本框 
        var cm = new Ext.grid.ColumnModel([ 
                                       {header:'产品编号',dataIndex:'product_id'}, 
                                       {header:'产品名称',dataIndex:'product_name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({ 
                                           allowBlank: false 
                                       }))}, 
                                       {header:'产品价格',dataIndex:'product_price',editor:new Ext.grid.GridEditor(new Ext.form.TextField({ 
                                           allowBlank: false 
                                       }))} 
                                   ]); 
10 在表格中添加新行 
    首先是所有列上都要指定 Ext.grid.GridEditor对象： 
     var gridPanel = new Ext.grid.EditorGridPanel({ 
        autoHeight: true, 
        renderTo: 'grid', 
        store: store, 
        cm: cm, 
        tbar: new Ext.Toolbar(['-', { 
            text: '添加一行', 
            handler: function(){ 
                var record = new Ext.data.Record({ 
                product_id:'', 
                product_name:'', 
                product_price:'' 
                }); 
                gridPanel.stopEditing();                
                store.insert(store.getCount(),record); 
                gridPanel.startEditing(store.getCount()-1,0); 
            } 
        }, '-', { 
            text: '删除一行', 
            handler: function(){ 
                Ext.Msg.confirm('信息', '是否删除当前记录？', function(btn){ 
                    if (btn == 'yes') { 
                        var sm = gridPanel.getSelectionModel(); 
                        var cell = sm.getSelectedCell(); 

                        var record = store.getAt(cell[0]); 
                        store.remove(record); 
                    } 
                }); 
            } 
        }, '-']) 
    }); 
   注意，是用"-"表示在工具栏中添加一条竖线,保存数据时，通过slice类，获得添加 
  text: '保存', 
            handler: function(){ 
                var m = store.modified.slice(0); 
                var data = []; 
                Ext.each(m, function(item) { 
                    data.push(item.data); 
                }); 
                alert(Ext.encode(data)); 
                Ext.lib.Ajax.request( 
                    'POST', 
                    'SaveData', 
                    {success: function(response){ 
                        Ext.Msg.alert('信息', response.responseText, function(){ 
                            store.reload(); 
                        }); 
                    }}, 
                    'row=' + encodeURIComponent(Ext.encode(data)) 
                ); 
            } 
        },'-']) 
     会用ext.encode方法把数组转为JSON格式的数据 


11 表格分组 
      var store = new Ext.data.GroupingStore({ 
        reader: reader, 
        data: data, 
        groupField: 'sex', 
        sortInfo: {field: 'name', direction: "ASC"} 
    }); 
     
    groupField指定了用什么字段进行分组，sortInFO用什么字段来排序： 
  var grid = new Ext.grid.GridPanel({ 
        autoHeight: true, 
        store: store, 
        columns: columns, 
        view: new Ext.grid.GroupingView(), 
        renderTo: 'grid' 
    }); 

 

 

 

 

 

 

转自：http://jackyrong.javaeye.com/blog/900624