使用Ext.grid.Panel显示远程数据
使用Ext.grid.Panel顯示遠程數據
對于Ext.grid.Panel而言，它只是負責顯示Store數組中心的數據，至于Store保存的數據到底是瀏覽器本地數據，還是遠程服務器的數據，Ext.grid.Panel并不關心。因此，使用Ext.grid.Panel顯示遠程數據也非常簡單，只要在配置Ext.data.Store時通過proxy選項指定加載遠程服務器數據即可。
如下示例示范了使用Ext.data.Store來加載遠程服務器數據，使用Ext.grid.Panel顯示Store所加載的遠程數據。
程序清單：codes\06\6.8\Ext.grid\Ext.grid.Panel_remote.html
<body>
<script type="text/javascript">
Ext.onReady(function(){
??? Ext.define('Book', {
???????? extend: 'Ext.data.Model',
???????? fields: [
?????????????? {name: 'id' , type: 'int'},
?????????????? {name: 'name', type: 'string'},
?????????????? {name: 'author', type: 'string'},
?????????????? {name: 'price', type: 'float'},
???????? ]
??? });
??? // 創建一個Ext.data.Store對象
??? var bookStore = Ext.create('Ext.data.Store',
??? {
???????? // 指定使用Book Model管理記錄
???????? model: 'Book',
???????? // 使用proxy指定加載遠程數據
???????? proxy:
???????? {
?????????????? type: 'ajax',
?????????????? url: 'getAllBooks',// 向該URL發送Ajax請求
?????????????? reader: { // 使用Ext.data.reader.Json讀取服務器數據
??????????????????? type: 'json',
??????????????????? root: 'data' // 直接讀取服務器響應的data數據
?????????????? },
???????? },
???????? autoLoad:true// 自動加載服務器數據
??? });
??? Ext.create('Ext.grid.Panel', {
???????? title: '查看服務器端圖書',
???????? width: 550, // 指定表單寬度
???????? renderTo: Ext.getBody(),
???????? // 定義該表格包含的所有數據列
???????? columns: [
?????????????? { text: '圖書ID', dataIndex: 'name' , flex: 1 }, // 第1個數據列
?????????????? { text: '書名', dataIndex: 'name' , flex: 1 }, // 第2個數據列
?????????????? { text: '作者', dataIndex: 'author', flex: 1 }, // 第3個數據列
?????????????? { text: '價格', dataIndex: 'price' , flex: 1 }, // 第4個數據列
???????? ],
???????? store: bookStore
??? });
});
</script>
</body>
?
上面示例中的粗體字代碼中通過proxy選項指定從getAllBooks處加載數據，該Servlet就是前面介紹Ext.form.field.ComboBox示例時使用的Servlet，此處不再給出代碼。該Servlet將會返回系統中所有圖書記錄，該圖書記錄將會由Store負責管理。
在瀏覽器中瀏覽該頁面，可以看到如圖6.74所示頁面。
?
圖6.74 顯示遠程數據
?
本文節選自
《瘋狂Ajax講義（第3版）》
李剛 編著
電子工業出版社出版
轉載于:https://blog.51cto.com/bvbroadview/1139443
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的使用Ext.grid.Panel显示远程数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux虚拟文件系统(VFS)
- 下一篇： 找回创新能力 才是苹果的救命稻草