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'}),
        reader: new Ext.data.JsonReader(...{
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            ...{name: 'retrunValue', type: 'int'},
            ...{name: 'displayText'}
        ])        
        });    

        var simpleForm = new Ext.FormPanel( ...{
                el : 'hello-tabs',
                labelAlign : 'left',
                title : '你好',
                buttonAlign : 'right',
                bodyStyle : 'padding:5px',
                width : 600,
                frame : true,
                labelWidth : 80,
                items : [...{
                    xtype : "textfield",
                    fieldLabel : "Text",
                    name : "textvalue"
                }],
                items : [...{
                    layout : 'column',
                    border : false,
                    labelSeparator : ':',
                    items : [ ...{
                        columnWidth : .5,
                        layout : 'form',
                        border : false,
                        items : [...{
                            xtype : 'textfield',
                            fieldLabel : '姓名',
                            name : 'name',
                            anchor : '90%'
                        }]
                    }, ...{
                        columnWidth : .5,
                        layout : 'form',
                        border : false,
                        items : [...{
                            xtype : 'textfield',
                            fieldLabel : '年龄',
                            name : 'age',
                            anchor : '90%'
                        }]
                    }, ...{
                        columnWidth : .5,
                        layout : 'form',
                        border : false,
                        items : [...{
                            xtype : 'combo',
                            store : ds,
                            valueField : "retrunValue",
                            displayField : "displayText",
                            mode : 'local',
                            forceSelection : true,
                            blankText : '请选择学历',
                            emptyText : '选择学历',
                            hiddenName : 'education',
                            editable : false,
                            triggerAction : 'all',
                            allowBlank : false,
                            fieldLabel : '学历',
                            name : 'education',
                            anchor : '90%'
                        }]
                    },

                    ...{

                        columnWidth : .25,
                        layout : 'form',
                        border : false,
                        items : [...{
                            style : 'margin-top:5px',
                            xtype : 'radio',
                            fieldLabel : '性别',
                            boxLabel : '男',
                            name : 'sex',
                            checked : true,
                            inputValue : 'M',
                            anchor : '95%'
                        }]
                    }, ...{
                        columnWidth : .25,
                        layout : 'form',
                        labelWidth : 0,
                        labelSeparator : '',
                        hideLabels : true,
                        border : false,
                        items : [...{
                            style : 'margin-top:5px',
                            xtype : 'radio',
                            fieldLabel : '',
                            boxLabel : '女',
                            name : 'sex',
                            inputValue : 'F',
                            anchor : '95%'
                        }]
                    }

                    ]
                }]                
            });
            
            
            win = new Ext.Window( ...{
                el : 'hello-win',
                layout : 'fit',
                width : 500,
                height : 300,
                closeAction : 'hide',
                plain : true,

                items : 
                simpleForm,
                
                buttons : [ ...{
                    text : '保存',
                    handler : function() ...{
                        if (simpleForm.form.isValid()) ...{
                            this.disabled = true;
                            simpleForm.form.doAction('submit', ...{
                                url : 'test.jsp',
                                method : 'post',
                                params : '',
                                success : function(form, action) ...{
                                    Ext.Msg.alert('成功', action.result.data);
                                    this.disabled = false;
                                    //document.location.href = 'hello.html';
                                },
                                failure : function() ...{
                                    Ext.Msg.alert('失败', '抱歉');
                                    this.disabled = false;
                                }
                            });
                        }
                    }
                }, ...{
                    text : '取消',
                    handler : function() ...{

                        simpleForm.form.load( ...{
                            url : 'formget.jsp',
                            method : 'get',
                            params : ''

                        });

                    }
                }]
                
        });
            
            
            ds.load();
        }
        win.show(this);
    }

唯一需要注意的是保存和取消按钮需要加入Ext.Window做控制，并且要注意FormPanel和Ext.Windows所要渲染的div块，并且这些块必须在grid.html中进行定义

<div id="hello-win" class="x-hidden">
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Hello World 1">
            <p>Hello...</p>
        </div>
        <!-- Auto create tab 2 -->
        <div class="x-tab" title="Hello World 2">
            <p>... World!</p>
        </div>
    </div>
</div>