ExtJS pagingtoolbar的使用

view层:

  this.bbar = [{
         	 xtype: ‘pagingtoolbar‘,
         	 //增加id
         	 id : ‘ptb‘,
             pageSize: 2,
             store: this.store,
             displayInfo: true,
             plugins: new Ext.ux.ProgressBarPager()
         }];

store层

 1 Ext.define(‘Industry_Demo.store.Industry‘, {
 2      extend: ‘Ext.data.Store‘,
 3      /*
 4      fields: [{name: ‘PK_Industry_ID‘,type: ‘int‘},
 5              {name: ‘Industry_Name‘,type : ‘string‘}
 6              ],
 7              */
 8      model : ‘Industry_Demo.model.Industry‘,
 9      pageSize : 2,
10      //非常重要的属性
11      //autoLoad: {start : 0, limit : 2},
12      proxy: {
13           type : ‘ajax‘,
14           enablePaging: true,
15          // url : ‘data/industries.json‘,
16           url : ‘/IndustryAdmin/getIndustries.do‘,
17           reader: {
18              type : ‘json‘,
19              root : ‘industries‘,
20              successProperty: ‘success‘,
21              totalProperty : ‘total‘
22
23         }
24      }
25      /*
26      data  : [
27                  {PK_Industry_ID:1,Industry_Name:‘aa‘},
28                  {PK_Industry_ID:2,Industry_Name:‘bb‘}
29              ]
30          */
31  });

controller层

Ext.define(‘Industry_Demo.controller.Industry‘,{
     //必须和文件同名
      extend : ‘Ext.app.Controller‘,
      init : function() {
          // console.log("Hello");
           this.control({

                ‘industryList‘ : {
                    itemdblclick: this.editRecord,
                    render : function(myView){
                        myView.getStore().load({params:{start:0,limit:2}});
                    }
                },

后台代码springmvc+mybatis

@RequestMapping(value="/getIndustries",method=RequestMethod.GET)
    public void getIndustries(HttpServletRequest request,HttpServletResponse response){
        String startString = request.getParameter("start");
        String limitString = request.getParameter("limit");
        int start = Integer.valueOf(startString);
        int limit = Integer.valueOf(limitString);
        System.out.println("select controller层");
        System.out.println(start+" "+limit);
        int num = industryService.getIndustriesNum();
        System.out.println(num+" ");
        List<Industry> list = null;
        list =  industryService.getIndustries(start, limit);
        System.out.println("mission completed I am back");

        String jsonString = "{success : true,total : ";
        jsonString +=num;
        jsonString +=",industries : [";
        int i = 0;
        if(list.size()>0){
        for(;i <list.size()-1;i++){
            jsonString += "{id : "+ list.get(i).getId() + ",name : ‘"+list.get(i).getName()+"‘},";
        }
        jsonString +="{id :" + list.get(i).getId()+",name : ‘"+list.get(i).getName()+"‘}]}";
        }
        else{
            jsonString = "{success : true,total : ";
            jsonString +=num;
            //jsonString +=",industries ";
            //jsonString +="{}]}";
             jsonString += "}";
        }
        try {
            response.getWriter().write(jsonString);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            System.out.println("Something not good happen");
            e.printStackTrace();
        }

    }
时间: 2025-01-09 15:43:41

ExtJS pagingtoolbar的使用的相关文章

Extjs之PagingToolbar

Ext.PagingToolbar,Ext.data.Store,Ext.data.HttpProxy,Ext.data.JsonReader,Ext.grid.GridPanel 在这里讲一下ExtJs下的一套分页步骤以及涉及到的Ext控件. 因为引入了Json作为数据传输格式,所以这里需要通过Http获得我们想要的数据: proxy: new Ext.data.HttpProxy ( { //url:'/Ajax/getEmpList.ashx' url: '/FX_LOG_QZ_T/get

Extjs 更新数据集Ext.PagingToolbar的start参数重置的处理

问题:当翻页后,比如当前是第二页,start参数此时是5(初始为0),当切换左侧分类时,我们期望的是从所选分类下明细记录的第一条开始显示,结果发现不是这样,依然是从新数据的第二页开始显示,就是说extjs默认传递的start参数没有重置为0,依然是5,这样后台通过sql分页就会出问题,解决方法是,对store的currentPage赋值,如下 filestore.currentPage = 1; treePanel.getSelectionModel().on('select', functio

ExtJs基础知识总结:弹窗(四)

概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌套到widget.window,然后随着widget.window的show方法展示到页面上哪?下面有几种方案思路 思路一.直接将gridpandel填充到widget.window对应的Items 代码如下: var InvoiceItemGrid = Ext.create('Ext.grid.P

Extjs GridPael用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/

ExtJS 4 Grids 详解

Grid Panel是ExtJS最常用的组件之一,它的功能非常丰富,提供了非常便捷的方法执行排序,分组,编辑数据. Basic Grid Panel 基本表格面板 让我们创建一个简单的表格,这有创建和运行表格的全部知识. Model and Store 模型和存储器 Grid Panel展现Store中的数据,Store可以被认为是records的集合,或者模型(Model)实例的集合.更多关于Store和Model的内容请查看<ExtJS 4 数据(包)详解>,讲这些是为了明确一下概念,Gr

extjs动态树 动态grid 动态列

由于项目需要做一个动态的extjs树.列等等,简而言之,就是一个都是动态的加载功能, 自己琢磨了半天,查各种资料,弄了将近两个星期,终于做出来了 首先,想看表结构,我的这个功能需要主从两张表来支持 代码目录表: CREATE TABLE SYS_T01_CODECONTENT ( ID NUMBER NOT NULL, PID NUMBER NOT NULL, TABLENAME VARCHAR2(50 BYTE), ZH_CN VARCHAR2(200 BYTE), ENABLE CHAR(1

ExtJs xtype类型介绍

自定义组件在定义的时候可以通过xtype配置为组件指定xtype短名称,此后创建对象可以通过xtype来创建自定义对象了,示例代码如下: Ext.define('MyApp.PressMeButton', { extend: 'Ext.button.Button', xtype: 'pressmebutton',//指定自定义组件的xtype text: 'Press Me' }); 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ex

ExtJS 4.2 组件介绍

目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 ExtJS的强大功能之一是提供了非常丰富的组件,包括grid(表格).panel(面板).form(表单).button(按钮).progressBar(进度条)等等. 一个的ExtJS 4应用程序的UI界面,就是由一个或多个组件组成. 这里将会介绍组件的分类.名称.结构以及创建方式. 1.2 组件分类

ExtJs笔记

1.Ext简介.Extjs是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面.ExtJs可以用来开发RIA(Rich Internet Application,富互联网应用系统)的Ajax应用框架.ExtJs是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中2.Ext库文件说明