サラリーマンのすらすらIT日記

IT関連を中心とした日々を綴ります。
--/--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2012/07/07

Ext JS 4.1でGrid

昨日の記事のクライアント側のプログラムです。Ext JS 4.1をまともに使うのは初めてです。Ext JS 3をやったことのある方なら、Ext JS 4.1のAPI Documentationを参考にすると、簡単なプログラムなら何とかなります。

まず最初に

Ext.BLANK_IMAGE_URL = "extjs-4.1.0/resources/themes/images/default/tree/s.gif";

を書くのは、Ver3の場合と同じ。次に、使うコンポーネントだけをrequireします。

Ext.require([
'Ext.data.*'
,'Ext.grid.*'
]);

*部分は実際に使うものだけを書いてもいい。次はVer4独特の書き方で、Model,Store,gridを定義します。

var itemsPerPage = 20;

Ext.define('rk', {
extend: 'Ext.data.Model'
,fields: ['id', 'shimei', 'cd', 'rgno']
});
Ext.create('Ext.data.Store', {
storeId: 'rkStore'
,model: 'rk'
,proxy: {
type: 'ajax'
,url: 'r.php/rk/24'
,reader: {
type: 'json'
,root: 'rk'
,totalProperty: 'count'
}
}
,autoLoad: false
,pageSize: itemsPerPage
});

var store = Ext.data.StoreManager.lookup('rkStore');

store.load({params: {start: 0, limit: itemsPerPage}});

Ext.create('Ext.grid.Panel', {
id: 'rg24Grid'
,title: 'rg24'
,renderTo: Ext.getBody()
,store: store
,width: 1200
,height: 600
,columns: [
// 省略
]
,dockedItems: [{
xtype: 'pagingtoolbar'
,store: store
,dock: 'bottom'
,displayInfo: true
,items: [
// 省略
]
}]
});

gridのdockedItemsの箇所は、ページ数の表示と前ページ・次ページに移動するボタンの配置。dockedItemsの中のitemsは、それ以外にボタンなどを配置したい時に使います(配置しない場合はなくてもよい)。これでOK。

Ver3より見通しがよく、書きやすい。

スポンサーサイト

コメント

コメントの投稿

  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

トラックバック

トラックバックURL:http://sookibizviz.blog81.fc2.com/tb.php/1249-e4b68c03

■  カレンダー

06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

■  プロフィール

sookibizviz

Author:sookibizviz
仕事の内容やソフトの紹介を交えながら、日々の悪戦苦闘を綴っていきます。

■  最新記事

■  最新コメント

■  最新トラックバック

■  月別アーカイブ

■  カテゴリ

未分類 (64)
BizViz (24)
IT (1119)
計量 (76)
環境 (26)
数学 (181)
ニュース (46)
本 (187)
音楽 (113)
囲碁 (5)
将棋 (26)
ブログ (14)
日記 (19)

■  FC2カウンター

■  検索フォーム

■  RSSリンクの表示

■  QRコード

QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。