[ 置顶] [加锁] [修改] [删除] [精华] [转移] [锁定用户] [修改]　 [关闭问题]　 收藏   [引用回复]

各位老大，我在做gridPanel分页时用到了PagingToolbar，但基本上所有的资料都只说了用 ds.load({params:{start:0,limit:10}}); 建立一个HTTP 参数到远程数据源. 感觉这样使用数据页面（页面提供数据）的方法很原始，我必须在store中 使用 Ext.data.HttpProxy({url:'datapage.aspx'}), 这种方式。
但我目前后台AJAX类全写好的，我用方法var data=getdata(20,25);就可得到服务器从第20条记录开始的25条数据。所以我把store使用内存模式Ext.data.MemoryProxy(data),就行了。所有测试都OK，但PagingToolbar似乎不支持事件和方法的邦定，帮忙看下面问题DEMO
=============================================================================================
Ext.onReady(function(){
//alert(TMKSOFT.getData(20,20).value);    //成功调试Json数据源,服务器Ajax方法，从服务器获取JSON数据 数据源绝对没问题

function getdata(st,pg)
{
   data=eval('('+TMKSOFT.getData(st,pg).value+')');
   return data;
}

var data=getdata(20,20);   //初始化调试了下，能成功显示数据

var store = new Ext.data.Store({
   proxy: new Ext.data.MemoryProxy(data),
   reader: new Ext.data.JsonReader({
   totalProperty: 'results',
   root: 'rows'
   }, [
   {name: 'id', mapping: 'id'},
   {name: 'name', mapping: 'name'},
   {name: 'organization',mapping: 'organization'},
   {name: 'homepage',mapping: 'homepage'},
   ])
});

//store.addListener('load',getdata); 想用Load侦听，但也失败

var colM=new Ext.grid.ColumnModel([{header:'项目编号',dataIndex:'id',sortable:true},
                                  {header:'项目名称',dataIndex:'name',sortable:true},
                                  {header:'开发团队',dataIndex:'organization',sortable:true},
                                  {header:'网站地址',dataIndex:'homepage',renderer:showUrl}]);

var grid = new Ext.grid.GridPanel({
           renderTo:'hello',
           title:"中国Java开源产品及团队",
           bodyStyle:'width:100%',
           autoWidth:true,
           height:500,
           //width:'100%',
           cm:colM,
           store:store,
           autoExpandColumn:2,
           bbar: new Ext.PagingToolbar({
           id:'pagingtoolbar',
           pageSize: 20,
           store: store,
           displayInfo: true,
           displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
           emptyMsg: "没有记录"
           })
                  });

  //var p1=document.getElementById("ext-gen30").value; //这样可得到需要从第几条记录开始
  //var p2=Ext.getCmp('pagingtoolbar').pageSize;            //这样可得到多少条纪录
  alert(p1+"   +   "+p2)
  store.load({callback:getdata});         //每点一下PagingToolbar触发什么事件,重调我getdata方法获取新数据，我该怎么写？
});

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

关于分页，我的理解有下面几点，不知道对不对：
１、GridPanel他会显示在Store中加载的所有数据，跟有没有使用PagingToolbar没关系，也就是说假如你的Store加载了50条数据，你设置了PageingToolbar的pageSize为10，但表格在显示的时候仍然会显示50条数据。PageingToolbar使用的是Store中的totalProperty指定的属性值得到总记录数，再除以每页的条数即pageSize来得到分页工具栏上的显示信息，PagingToolbar只是一个信息显示控件。
２、如果使用的是MemoryProxy，如果你这里是内存数据的话，肯定会全部把数据显示到表格中。当然如果是远程脚本引擎调用的话，比如使用EasyJWeb的远程脚本引擎从服务器端加载数据，那么则要注意在数据加载完后，再使用这个数据。而我看你的var data=getdata(20,20);  以及里面的调用没看见是使用远程脚本调用的方式，对于异步调用的话我们一般使用回调来得到结果，除非你使用的是同步调用。
３、至于PagingToolbar的事件，那么你可以通过看PaingToolbar.js这个源码来得到。比如下面的是定义工具栏上“首页”按钮的事件代码：
this.first = this.addButton({
           tooltip: this.firstText,
           iconCls: "x-tbar-page-first",
           disabled: true,
           handler: this.onClick.createDelegate(this, ["first"])
       });
你要做的是重新设置这个事件的响应函数即可，但这其实绕了很大的弯路。

你也可以直接调用PageingToolbar组件的doLoad方法来加载数据，该方法只需要一个起始参数（代表start)即可。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

不过最简单的办法，直接使用远程脚本调用引擎，这个有很多现在的解决方案，看看vifir提供的示例：
http://www.vifir.com/entry/view/917505.html

使用一个简单的DWRStore就解决了。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

哥哥，你说的我理解,数据显示store跟PaginToolbar没关系，PagingToolbar只能传参给服务器查询。目前服务器取数据没问题，C#在数据访问层写个DEMO方法很简单，然后我尝试添加事件帧听：
  store.addListener('datachanged',function(st, rds, opts){       //'datachanged' 或者'load' 事件都一样效果
    p1=document.getElementById("ext-gen30").value;  //当前页码数，PagingToolbar中那个可输入的文本框的值，不知道属性，就硬扣出来
    p2=Ext.getCmp('pagingtoolbar').pageSize;            //每页显示数量
    data=getdata(p1,p2);
    //这里写store.reload() 或 store.loadData(data)     都会造成死循环
   });
   store.loadData(data);

翻页仍不起作用，下面的数据在动，但表格没动，在getdata方法不停的触发，方法中alert出取到的值data与在不停变化，但store没有刷新一样。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

呵，我是.net 工程师，一直从事.net开发，就这个问题解决了，其它的都完成了。这个框架要比dwr轻便N倍，配合VS2008单步调试，完全就像做传统的aspx页面一样，页面调用服务器方法就是了，比WCF+LINQ要轻便 我会把源代发上来共享的

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

我向你学习.

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

你不能在datachanged或load事件的响应函数中，调用store.load或reload方法啊。这样肯定是会无限次的执行调用及加载了。只要一调用store.load()方法，在加载完成后就会执行load事件的响应函数，而你在响应函数中又再一次调用store.laod()方法。
你应该是在翻页按钮的事件响应函数中调用store.load()方法来加载数据！另外document.getElementById("ext-gen30").value;这样的写法问题也比较严重，页面上随便添加一个Ext组件，比如一个对话框甚至一个窗口都有可能把这个ext-gen30打乱。
请参照这前面说的2、３、４几点。

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

嗯，我就是查不到翻页按钮的事件和文本输入框的事件，API好像没有，开源人订的书也一直没到，daixa你有那个指南能帮我查下这类事件不

呵呵，献丑了，这种document.getElementById("ext-gen30").value纯属硬来,Ext.get 或 getCmp 无法得到值先这样取一下，今天没时间了，帮MM搞SAP去了，非常感谢大侠daxia的帮助，明天再跟你请教！

[修改]   [最佳答案]   [删除]   [锁定用户]   [引用回复]

翻页按钮事件和文本输入框，你直接看PagingToolbar.js的代码就知道了啊，1楼已的第三点已经讲过了哈。vifir由于5.12地震，所以《ExtJS开发批南》是在５.15才发的货的。久等了哈！