Ext grid list shows the number of control lines (grid toolbar to add a drop-down list)

I am very excited and relieved to have their own experience to share Ext done to everyone!
I remember once met such a very painful problem!
Is Ext's grid table shows the number of rows to the grid in good control of the original to add a tool bar

      /**
      *@see  The paging toolbar
      */
          var bbar = new Ext.PagingToolbar({
          pageSize : number,
          store : store,
          displayInfo : true,
          displayMsg : ' Display the second   {0}  Bar to the   {1}  Records, a total of   {2}  Bar  ',
          emptyMsg : " No records  "
                });

pageSize: number, the pageSize property has not thought out approach to how to make him dynamic!
Initialization of the display results page article a few are OK, the implementation of the first query shows the number of articles also correct, but changed the number of articles displayed toolbar with the toolbar click Next when the page is initialized according to the display of the number of articles to flip!
Later on the website to ask a number of shrimp, well, have presented a solution!
I am here, then order and sort out!

The following code:

/**
     *@see  The paging toolbar, select the drop-down list
     */
  var pagesize_combo = new Ext.form.ComboBox({
      store: [['5', 5], ['10', 10], ['20', 20], ['50', 50], ['100', 100]],
      width:50,
      readOnly:true,
      emptyText: '20',
      mode: 'remote',
      triggerAction: 'all',
      valueField: 'value',
      displayField: 'text'
     });         

      /**
      *@see  The number of select drop-down list-select event
      */
      pagesize_combo.on("select",function(comboBox){
      bbar.pageSize = parseInt(comboBox.getValue());
      number=parseInt(comboBox.getValue());
      //store.reload({params:{start:0,limit:page_toolbar.pageSize}});
       });     

      /**
      *@see  The paging toolbar
      */
          var bbar = new Ext.PagingToolbar({
          pageSize : number,
          store : store,
          displayInfo : true,
          displayMsg : ' Display the second   {0}  Bar to the   {1}  Records, a total of   {2}  Bar  ',
          emptyMsg : " No records  ",
          items:[ '   Page number  :', pagesize_combo]
                });

      /**
      *@see  A form template
      */
      var grid=new Ext.grid.GridPanel({                                                                                                                         //GridPanel Inherits from the Panel class
      stripeRows:true,
      loadMask:true,
      store:store,                                                                                                                                                                                      //store  On behalf of the above   store  Object
      cm:grid_colum,                                                                                                                                                                            //gird_colum  An object representing the above grid_colum
      sm:sm,
      viewConfig:{
      forceFit:true
      },
      bbar:bbar
      });

In the grid toolbar add a drop-down list pagesize_combo, and added a select to pagesize_combo selected events, in the event function bbar.pageSize = parseInt (comboBox.getValue ()); to change the pageSize value, Ha ha in the know Following this approach, I suddenly realized, in fact, can not use a drop-down list, but do so, it is really nice!

Figure:

Ext grid list shows the number of control lines (grid toolbar to add a drop-down list)

分类:Web 时间:2010-03-31 人气:506
分享到:
blog comments powered by Disqus

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.098 (s). 14 q(s)