1. #1
    Ext User
    Join Date
    Jun 2007
    Posts
    4
    Vote Rating
    0
    jaydwire2 is on a distinguished road

      0  

    Question Can not get pagingtoolbar to work; grid displaying all rows

    Can not get pagingtoolbar to work; grid displaying all rows


    Hello,
    I have tried to follow the paging example to add a pagingtoolbar and have made a mistake somewhere. The paging toolbar displays Page 1 of 8, but within the grid itself and at the far most right of the toolbar, is displayed 1 - 178 of 178. Clicking the next page arrow displays an empty grid and the toolbar states Page 2 of 1. I believe it has something to do with this code, root.addAttribute("totalCount", "");, but I am not sure. Also, if I change the code from ds.load(); to ds.load({params:{start:0, limit:25}});, the grid fails to populate. Do I have something wrong with the ext code? There are two files that I am using, an html page, and a java servlet. I have included both below. Thank you in advance for any help.

    Code:
    	protected void doGet(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
    
    		try {
    			Document document = null;
    
    			Class.forName("oracle.jdbc.driver.OracleDriver");
    
    			String username = "test";
    			String passwd = "pass";
    
    			Connection con = DriverManager.getConnection(
    					"jdbc:oracle:thin:@albert:1521:jester", username,
    					passwd);
    
    			Statement stmt = con.createStatement();
    
    			StringBuffer sb = new StringBuffer();
    			sb.append("var data = {[");
    
    			ResultSet rs = stmt
    					.executeQuery("SELECT * FROM QUEUE where project = 'test'");
    
    			document = DocumentHelper.createDocument();
    			final Element root = document.addElement("root");
    			//root.addAttribute("totalCount", "" + filter.length);
    			root.addAttribute("totalCount", "");
    
    			while (rs.next()) {
    				final Element record = root.addElement("record");
    				record.addAttribute("dbid", rs.getString("dbid"));
    				record.addAttribute("project", rs.getString("project"));
    				record.addAttribute("status", rs.getString("status"));
    			}
    
    			final PrintWriter out = response.getWriter();
    			response.setContentType("text/xml; charset=UTF-8");
    			out.write(document.asXML());
    			out.close();
    
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    
    	}
    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Build Request Grid</title>
    
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
    <script type="text/javascript" src="ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    
    <script>
    Ext.onReady(function() {
    
      var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
          url: '/grid/DataServlet'
        }),
        reader: new Ext.data.XmlReader({
        totalProperty: 'totalCount',
          record: 'record'
        }, [
          {
            name: 'dbid',
            mapping: '@dbid'
          },
          {
            name: 'project',
            mapping: '@project'
          },
          {
            name: 'status',
            mapping: '@status'
          }
        ])
      });
      
      var colModel = new Ext.grid.ColumnModel([
        {
          header: "DBID",
          width: 80,
          sortable: true,
          dataIndex: 'dbid',
          align: 'center'
        },
        {
          header: "Project",
          width: 200,
          sortable: true,
          dataIndex: 'project'
        },
        {
          header: "Status",
          width: 120,
          sortable: true,
          dataIndex: 'status',
          align: 'center'
        }
      ]);
      
      var grid = new Ext.grid.GridPanel({
          ds: ds,
          cm: colModel,
          renderTo: 'grid',
          height: 320,
          width: 875,
          frame:true,
          autoScroll: false,
          title: 'Build Request Grid',
          bbar: new Ext.PagingToolbar({
                pageSize: 25,
                store: ds,
                displayInfo: true,
                displayMsg: 'Displaying builds {0} - {1} of {2}',
                emptyMsg: "No builds to display",
                items:[
                    '-', {
                    pressed: true,
                    enableToggle:true,
                    text: 'Show Preview',
                    cls: 'x-btn-text-icon details',
                    toggleHandler: toggleDetails
                }]
            })   
       });
       
        // render it
        grid.render();
    
        // trigger the data store load
        ds.load();
        // ds.load({params:{start:0, limit:25}});
    
        function toggleDetails(btn, pressed){
            var view = grid.getView();
            view.showPreview = pressed;
            view.refresh();
        }
    });
    
    
    
    
    </script>
    
    </head>
    <body>
    <div id="grid"></div>
    </body>
    </html>

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,163
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    In your server side code you need to return the correct number of results, you aren't doing that anywhere, your query always returns the whole lot.

    The totalCount property should include the total number of items (178).

  3. #3
    Ext User
    Join Date
    Jun 2007
    Posts
    4
    Vote Rating
    0
    jaydwire2 is on a distinguished road

      0  

    Question returning totalCount

    returning totalCount


    Hello,
    I hard coded the totalCount value, 178, to see if that fixed the issue. The xml contains the value as seen below, but the grid paging still does not work when I use ds.load({params:{start:0, limit:25}}); instead of ds.load();. Does anyone see the issue? thanks.

    Code:
    ResultSet rs = stmt
    					.executeQuery("SELECT * FROM QUEUE where project = 'pf_3.6a'");
    
    			document = DocumentHelper.createDocument();
    			final Element root = document.addElement("root");
    			root.addAttribute("totalCount", "178");
    
    			while (rs.next()) {
    				final Element record = root.addElement("record");
    				record.addAttribute("dbid", rs.getString("dbid"));
    				record.addAttribute("project", rs.getString("project"));
    				record.addAttribute("status", rs.getString("status"));
    			}
    Code:
     <?xml version="1.0" encoding="UTF-8" ?> 
    - <root totalCount="178">
      <record dbid="3363" project="pf_3.6a" status="Completed"  /> 
      <record dbid="3389" project="pf_3.6a" status="Completed"  />
      .
      .
      . 
      </root>

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Did you read what event told you?

    Code:
        ResultSet rs = stmt.executeQuery("select count(*) FROM QUEUE where project = 'pf_3.6a'");
        rs.first();
        int total = rs.getInt(1);
    
        stmt.executeQuery("SELECT * FROM QUEUE where project = 'pf_3.6a' limit " +
        request.getParameter("start") + "," + request.getParameter("limit");
    
        document = DocumentHelper.createDocument();
        final Element root = document.addElement("root");
        root.addAttribute("totalCount", Integer.toString(total));
    
        while (rs.next()) {
    	final Element record = root.addElement("record");
    	record.addAttribute("dbid", rs.getString("dbid"));
    	record.addAttribute("project", rs.getString("project"));
    	record.addAttribute("status", rs.getString("status"));
        }
    And I'd really recommend using JSON to send back your results.

    Quicker and easier both on the server and browser sides: http://www.json.org/java/index.html

Thread Participants: 2