Extjs学习笔记2 -创建一个GridPanel

最新推荐文章于 2023-06-17 22:52:50 发布

CROSSCI

最新推荐文章于 2023-06-17 22:52:50 发布

阅读量937

点赞数

分类专栏： Extjs4 文章标签： extjs json header autoload string button

本文链接：https://blog.youkuaiyun.com/CROSSCI/article/details/7571126

版权

Extjs4 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用ExtJS实现分页加载数据的功能，包括设置每页显示的条目数、创建数据存储并配置Ajax代理以从服务器加载数据。示例中详细展示了JavaScript代码及服务器端json.jsp文件的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：

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