Ext Js 关于GridPanel---EditorGridPanel

来源：互联网发布：rar解压软件 mac版编辑：程序博客网时间：2024/05/16 09:44

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='显示详细信息' onclick='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