Think of Ext2.0 (2)

4.         Grid

Grid所需要的json字符串

{totalProperty:100,root: [{id:1,name:'二月DD1',descn:'descn1'},{id:2,name:'二月DD2',descn:'descn2'}, {id:3,name:'二月DD3',descn:'descn3'},{id:4,name:'二月DD4',descn:'descn4'}, {id:5,name:'二月DD5',descn:'descn5'},{id:6,name:'二月DD6',descn:'descn6'}, {id:7,name:'二月DD7',descn:'descn7'},{id:8,name:'二月DD8',descn:'descn8'}, {id:9,name:'二月DD9',descn:'descn9'},{id:10,name:'二月 DD10',descn:'descn10'}]}

Grid.jsp 根据起始值和限制数量决定返回json字符串

<% @ page language = " java "  contentType = " text/html; charset=UTF-8 "
    pageEncoding = " UTF-8 " %>
<%
// response.setCharacterEncoding("UTF-8");
String start  =  request.getParameter( " start " );
String limit  =  request.getParameter( " limit " );
try   ... {
    int index = Integer.parseInt(start);
    int pageSize = Integer.parseInt(limit);

    //String json = "{totalProperty:100,root:[";
    String json = "{totalProperty:100,root:[";
    for (int i = index; i < pageSize + index; i++) ...{
        json += "{id:" + i + ",name:'二月DD" + i + "',descn:'descn" + i + "'}";
        if (i != pageSize + index - 1) ...{
            json += ",";
        }
    }
    json += "]}";
    response.getWriter().write(json);
    //out.print(json);
}   catch (Exception ex)  ... {
}
%>

获取数据时，如此访问grid.jsp文件

grid.jsp?start=1&limit=10

Grid使用 

Grid中字段定制

     var  cm  =   new  Ext.grid.ColumnModel([
         ... {header:'描述',dataIndex:'id'} ,
         ... {header:'姓名',width:100, sortable:true,dataIndex:'name'} ,
         ... {header:'描述',dataIndex:'descn'}
    ]);

Header        显示名称

dataIndex     从ds查找字段

width         字段宽度

sortable       是否允许排序 

Grid中使用数据源的定义，从grid.jsp中获取数据 

 

     var  ds  =   new  Ext.data.Store( ... {
        proxy: new Ext.data.HttpProxy(...{url:'grid.jsp'}),
        reader: new Ext.data.JsonReader(...{
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            ...{name: 'id'},
            ...{name: 'name'},
            ...{name: 'descn'}
        ])
        
    } );

定义GridPanel创建Grid

     var  grid  =   new  Ext.grid.GridPanel( ... {
        el: 'grid',
        width:600,
        ds: ds,
        cm: cm,
        
        bbar: new Ext.PagingToolbar(...{
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "你好"
    })

    } );    
   
    grid.render();

el为grid.html中id为grid的div块

ds  数据源

cm  grid显示列定义

bbar  bottom toolbal下面的工具栏

       这里使用分页控件   

最后ds导入时候，使用参数进行过滤

ds.load({params:{start:0,limit:10}}); 

扩展一下，将上面的Form放入到grid中来

在Grid上添加一个工具栏，通过单击工具栏中Add Something按钮，弹出上面的Form信息

修改如下：

var  grid  =   new  Ext.grid.GridPanel( ... {
        el: 'grid',
        width:600,
        ds: ds,
        cm: cm,
        tbar:[...{
            text:'Add Something',
            tooltip:'Add a new row',
            iconCls:'add',
            handler : onItemClick
        }, '-', ...{
            text:'Options',
            tooltip:'Blah blah blah blaht',
            iconCls:'option'
        },'-',...{
            text:'Remove Something',
            tooltip:'Remove the selected item',
            iconCls:'remove'
        }],
        bbar: new Ext.PagingToolbar(...{
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "你好"
    })

    } );    

在GridPanel添加在Grid上的Toolbar，Toolbar上添加三个按钮，并为Add Something添加单击事件onItemClick。

单击事件

var  win;
     function  onItemClick(item)  ... {
        //alert(item.text);        
            
        if (!win) ...{   
            
        var ds = new Ext.data.Store(...{
        proxy: new Ext.data.HttpProxy(...{url:'combo.jsp'}),