Ext 4.0.2a 的grid裡面的pagingToolbar和PagingScroller
不好意思...
小妹我又來打饒大家了～
我遇到一個困饒～
在grid的pagingToolbar我大概知道不支持本地分頁...
可以請問一下（已有上網查過...不過還是不太懂）：
1)我在pagingToolbar的store的proxy設置一個url:'data/users.json'，所以是本地數據，自己電腦的數據，這樣的意思嗎？而他給我們的example，url設置為url: 'http://www.sencha.com/forum/topics-browse-remote.php'，所以是在網路上的，叫遠端數據？那如果有一天自己要開個網站，那不就url都要設置成別人的網站嗎？頭腦有點混亂...可以請教一下各位前輩，本地分頁(數據)的意思是？遠端數據是？謝謝大家> <~(我很怕自己問一個蠢問題！！)
在grid的PagingScroller我不了解的是...
2)下面我有用紅字凸顯問題，註：這是我自己寫的範例...因為官網上的範例掛掉了...
/**
* @example Paging Toolbar
*
* This example demonstrates loading data in pages dynamically from the server using a {@link Ext.toolbar.Paging Paging Toolbar}.
* Note, that since there is no back end (data is loaded from a static file at `data/users.json`) each page will show the same data set.
*/
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.require('Ext.grid.PagingScroller');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
Ext.onReady(function() {
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true,
pageSize: 12,//在pagingScroller裡pageSize的功用？？
proxy: {
type: 'ajax',
url : 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total'
}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
// Use a PagingGridScroller (this is interchangeable with a PagingToolbar) //←這是他的註解
verticalScrollerType: 'paginggridscroller', //verticalScrollerType在Ext4.0.2a的API裡找不到，代表他不是保留字，我也試過自己亂改，scroller仍可以顯現，那怎麼知道啥時要寫這個verticalScrollerType？但paginggridscroller這個卻是保留字...混亂...
// do not reset the scrollbar when the view refreshs //←這是他的註解
invalidateScrollerOnRefresh: false, //這個功用是什麼？改成true和false結果好像都一樣...自己有試過，好像不像他註解解釋的那樣
// infinite scrolling does not support selection //←這是他的註解
disableSelection: true, //這個功用是什麼？改成true和false結果好像都一樣...自己有試過，好像不像他註解解釋的那樣
width: 400,
height: 220,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email'
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
});
});
謝謝大家...
[quote]
裡面Ext create 一個gridPanel物件，然後裡面有verticalScrollerType
和disableSelection、viewConfig....這些屬性，但為什麼Ext 4.0.2a API裡的Ext.grid.Panel找不到verticalScrollerType、disableSelection、viewConfig、...這些關鍵字....
[/quote]
这个不太清楚，有可能这个功能不太成熟，没有把它作为标准配置属性列出来，也可能文档不够完善。
其实extjs对象有很多属性，都是可以用的，只是列在API文档中的被认为是公共的属性，其他的是私有属性。
:lol: 小妹
何谓本地分页，并不是你电脑的数据叫本地数据。。
这个本地分页，相当如数据已经取出来，已经传给extjs grid，然后extjs grid在前台分页，所以它请求数据，只请求一次。
服务器端分页，是每次翻页的时候都要请求服务端，
而至于你说的，你自己开网站，数据可以存在数据库，
然后分页的时候，从数据库取数据，这个针对不同数据库，有不同的分页方法。
数据分页实现可以有三个地方：
1、客户端程序，这里而言就是指浏览器的JS程序
2、应用服务器，数据在服务器通过服务器端程序，比如java来实现分页
3、数据库，这是利用数据库提供的原始支持实现分页，比如mysql的limit
这里后两种分页数据需要多次向服务器请求，按需获取数据，一般来说就是当前显示页需要的数据。用的比较多的是数据库分页，也是最常见的，即每次翻页都发起请求，由服务器端返回当前也的数据，这样在数据库数据量比较大时可以很好的提供查询性能。
[quote]
我在pagingToolbar的store的proxy設置一個url:'data/users.json'，所以是本地數據，自己電腦的數據，這樣的意思嗎？
[/quote]
因为这个例子是模拟翻页，所以直接使用了本地数据。其实本地翻页并不一定说数据就是本地的，因为你完全可以把全部数据都从服务器请求下来，然后用js分页，所以判断的标准是真正实现数据分割的逻辑是在哪里完成的。那么这里的如果要实现本地翻页，就需要在js里来实现数据分割的逻辑，ExtJS没有原生的本地分页，需要你自己代码实现。
[quote]
那如果有一天自己要開個網站，那不就url都要設置成別人的網站嗎？頭腦有點混亂...
[/quote]
这个不太可能，原因包括两个：
1、一般发布为产品的网站，都会把自己的js进行压缩。这样客户端查看到的js源码基本上很难看出内部逻辑，更别说更改了。
2、即使上面的url能更改为其他网站的地址，javascript也为我们考虑了这个问题，ajax请求有一个同源策略，在一个域名下向另一个域名发起请求是不允许的。这是也为什么网上有许多讨论解决跨域请求问题的文章的原因。
你上面例子是修改的哪里例子代码？
[quote][code="java"]
// Use a PagingGridScroller (this is interchangeable with a PagingToolbar) //←這是他的註解
verticalScrollerType: 'paginggridscroller', //verticalScrollerType在Ext4.0.2a的API裡找不到，代表他不是保留字，我也試過自己亂改，scroller仍可以顯現，那怎麼知道啥時要寫這個verticalScrollerType？但paginggridscroller這個卻是保留字...混亂...
// do not reset the scrollbar when the view refreshs //←這是他的註解
invalidateScrollerOnRefresh: false, //這個功用是什麼？改成true和false結果好像都一樣...自己有試過，好像不像他註解解釋的那樣
// infinite scrolling does not support selection //←這是他的註解
disableSelection: true, //這個功用是什麼？改成true和false結果好像都一樣...自己有試過，好像不像他註解解釋的那樣
[/code][/quote]
这几个属性是设置另一种分批加载数据的方式“Infinite Scrolling”，就是无限滚动，你看不到变化，可能是你配置的不对，你可以看看这个例子：[url]http://extdirectspring.ralscha.ch/demo/direct-infinite4.html[/url]
另外，extjs 4里面包含一个本地分页的例子，在文件：sliding-pager.html里面，你可以看看。
童鞋，没有其他问题可以结贴。
[quote]
Ext.Loader.setConfig({enabled: true});//這邊是動態加載的意思吧（有查過）！！為什麼要動態加載呀？是因為require的關係嗎？在這裡使用才可以實現動態加載？
[/quote]
动态加载是为了增加性能，按需加载数据和分页是一样的道理，但是这样动态加载会造成多处发起请求，所以这种方式只在开发是才用，生产环境下就直接加载了，所以有了这么一个开关设置：
[code="java"]Ext.Loader.setConfig({enabled: true});[/code]
[quote]
Ext.Loader.setPath('Ext.ux', 'ext-4.0.2a/examples/ux/');//我有查過api，setPath前面的'Ext.ux'是namespace，後面'ext-4.0.2a/examples/ux/'是插件目錄（根據現有的js），namespace是要怎麼取才是對的，因為我把.ux刪掉後，內容就跑不出來的，（有查過）
[/quote]
你当然取不到了，像这种动态加载，命名空间，javascript本身没有语法级别的支持，现在的实现都是不同框架自己的设计，那么这种设置当然要有一定的约定了，如这里的命名空间，觉约定从后面指定目录里去js，如果你连目录都删除了，自然命名空间也起不了作用了。
[quote]
開發的意思是正在寫code嗎？而生產是寫好了嗎？不好意思...我是台灣人不太了解...
我是把它改成這樣Ext.Loader.setPath('Ext', 'ext-4.0.2a/examples/ux/');沒有把example/ux目錄刪掉...
[/quote]
是的，开发就是指”development“阶段，还在coding和debug，生产就是发布上线了。
[code="java"]Ext.Loader.setPath('Ext', 'ext-4.0.2a/examples/ux/');[/code]
这样当然也不对了，就如同java，JVM导入Object类，必须从rt.jar文件中的java/lang目录中查找，如果没有那就允许不了。这里的Ext.Loader.setPath也好似类似的道理。