Extjs學習筆記2 -創建一個GridPanel

效果圖如下：

js代碼

Ext.onReady(function(){
	var itemsPerPage = 5;   // set the number of items you want per page

var store = Ext.create('Ext.data.Store', {
    id:'simpsonsStore',
    autoLoad: false,
    fields:['id', 'name', 'descn'],
    pageSize: itemsPerPage, // items per page
    proxy: {
        type: 'ajax',
        url: 'json.jsp',  // url that will load data with respect to start and limit params
        reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'totalProperty'
        }
    }
});

// specify segment of data you want to load using params
store.load({
    params:{
        start:0,
        limit: itemsPerPage
    }
});


var panel = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [
        {header: '編號',  dataIndex: 'id'},
        {header: '姓名', dataIndex: 'name', flex:1},
        {header: '順序', dataIndex: 'descn'}
    ],
    width: 400,
    height: 220,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],
    tbar: [
  { xtype: 'button', text: 'Button 1',handler:function(){Ext.Msg.alert("info","ok");} }
],
    renderTo: Ext.getBody()
});

});

json.jsp

<%
    	String start = request.getParameter("start");
    	String limit = request.getParameter("limit");
    	if(null==start||!start.matches("[0-9]{1,9}"))
    	{
    		start = "0";
    	}
    	if(null== limit||!limit.matches("[0-9]{1,9}"))
    	{
    		limit = "10";
    	}
    	int index = Integer.parseInt(start);
    	
    	int pageSize = Integer.parseInt(limit);
    	//System.out.println("pageSize:"+pageSize);
    	String json = "{totalProperty:30,items:[";
    	for(int i=index;i<pageSize+index;i++)
    	{
    		json += "{id:"+i+",name:'name"+i+"',descn:'descn"+i+"'}";
    		if(i!= pageSize+index-1)
    		{
    			json +=",";
    		}
    	}
    	json+="]}";
    	
    	response.getWriter().write(json);
    %>