ExtJS入門その12『Ext.data.Store』メモリー編
2009/09/17 09:26:37
前回はデータが同ドメインによせクロスドメインにせよ、離れて存在するとろこにあるものを引っ張ってきて使うということを検証しましたが、今度はメモリ内にあるデータ(変数)を使用してというのをこれまた泥臭くやってみたいと思います。
まぁ普通これやってから前回へという感じが自然で、逆になっちゃいましたけどええでしょう。
まぁ普通これやってから前回へという感じが自然で、逆になっちゃいましたけどええでしょう。
■配列変数を組んでそいつを使う [デモ]
「Ext.data.MemoryProxy」と「Ext.data.ArrayReader」の組み合わせですな。
データ部分のみを別の変数でもたせてつっこむことももちろんできます。
ついでに可変部分であるレコード部分も外で変数でもたせてつっこむと…
(何故「MyDataRecord」の部分が「{}」の外へ当てはめれるのかは前回を見てください)
よく「Ext.data.MemoryProxy」と「Ext.data.ArrayReader」を組み合わせたクラスである「Ext.data.SimpleStore」が紹介されているが、
ExtJS3.0ではそのようなクラスがAPIドキュメントにもないのでなくなったんでしょうか?
ところで「MyDataRecord」の部分ですが、「name: 」指定だけの場合は
またこの部分ではXMLタグ名を指定するだけでなくあれこれやるところでもあるけれども、ついでだからそれらもちょっとおさえておこう。
主要なものは以下の4つを覚えておくとよい。
○name…ExtJSで参照できる新しい名前
必須。元のXMLタグ名と同じ名前を指定するならmappingは不要。
mappingを書かずにかつXMLにないタグ名を書いたらデータは表示されない。
○mapping…元のXMLタグ名
そのままの通り。ただこれを使う場合は同じXMLタグ名で複数のノードが設定されている場合だ。
その場合は「元のXMLタグ名:nth(何番目)」と指定するとよい。
例えば電話番号がふたつあって
ただしこれはXMLの場合でJSONなら
○type…表示できる値に変換するためのデータタイプ
auto : デフォルト。変換しない。
string : 文字列型
int : 数値型
float : 浮動小数点型
boolean : ブーリアン型、つまりtrueかfalse
date : 日付型
どれぐらい確かなのか制約があるのかが感覚的にわからない。試しに日本語文字列の値をもつものに「type:'int'」とやってみたけど、表示上は変わりなかった。
恐らくrendererとかで何か処理をする場合に型を意識しないといけない時にいるのだろうと予想いまのところ。
○dateFormat…日付表示のためのフォーマット指定
日付のデータならここで日付のフォーマットを指定して表示を制御できる。
例えば「dateFormat: 'n/j h:i'」とすれば「3月1日 03:05」という風になる。
「proxy: 」で「Ext.data.MemoryProxy」を使ってデータを取得せずに
最後にすご〜く初歩的なことなんですが、はっきり意識して見るとちょっと前進したような気になります。
なんのこっちゃわかりませんが、ここなんでこんな書き方するんやろう?とか、こことここ似てるんやけどちょこっと違ってなんか違和感があるなぁ〜とか、結構スルーしているところを「それはそんなもんや、そう決まっているから仕方ねぇ」と軽く思うのではなく、ちょっと意識して理解してみるとなんかちょっと自分がjavascriptわかってきた!と思って気が楽になるものです。
例えば、
「[]」を「[]」でくくったりして「[[」や「]]」が続いたりすると私なんかはすっごく違和感があるわけです。
でも「[]」は中の要素をカンマ区切りで配列にする際に使う記号で「{}」は中の要素を「要素名:内容」という書き方をするオブジェクトリテラルなんだということを理解しつつ一旦立ち止まってつぶさに見るとなるほどなぁと思える。
違和感は慣れていないせいもあるし、やはりその感覚があるということはその知識がしっかりと体にしみついていないということなのでしょう。
なんとかく見ていたものをしっかり意識して確認しながら理解するとあぁ一歩進んだなと、ひいてはExtJSを理解できそうだと自信を持つことにもつながるというわけですな。
var MyDataStore = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy([
['佐藤','男','090-8580-4820','wxqm@viutqz.com','リラックスべたで、怠けることを知らない。'],
['鈴木','男','090-8407-7990','mlcs@cyppsi.com','正しいことは、唯一つだと思っている。'],
['高橋','女','090-7749-4837','xvrf@ozmzwj.com','いつも公平であるかどうか気にかける。'],
['田中','男','090-1500-0781','rhqt@devgce.com','さびしがり屋で、家族と行動をともにしたがる。'],
['渡辺','女','090-0643-1860','xhiw@hbaanj.com','仕事のミスはほんの少しでも気にする。'],
['伊藤','男','090-6000-9422','ctcf@iylilz.com','義理硬いが、人づきあいを避ける。'],
['山本','女','090-2739-6835','cakc@owivmj.com','シャイで人見知り。'],
['中村','男','090-9009-5068','uvei@bypdib.com','柔軟な考え方や生き方がしにくい。'],
['小林','男','090-2454-0886','mxlg@qzdenx.com','いつも緊張して、体や関節がこわばっている。'],
['加藤','男','090-1704-6387','hlpd@gulpta.com','優等生気質で、決まりを守るのは当たり前と考える。'],
['吉田','男','090-9682-4887','hnch@evcmuq.com','言葉使いがしっかりと、ていねいであることが多い。'],
['山田','女','090-5429-8868','xouy@pclzhz.com','ナチュラリストで、スポーツを愛好することが多い。'],
['佐々木','女','090-4249-0096','prqg@hhnsfe.com','何事もねばならない、すべきであると考えがち。'],
['斎藤','男','090-4454-8984','tole@bwluxz.com','努力家・勤勉家。'],
['山口','女','090-6533-0520','awro@oagsbb.com','人目を気にして、恥意識がかなり強い。'],
['松本','女','090-6997-9366','uubz@mzrfvd.com','性急で待てない気分になり、イライラしやすい。'],
['井上','男','090-8942-1284','ihbv@wwmirx.com','狭量だが、言うことに裏表がない。']
]),
reader: new Ext.data.ArrayReader({
fields: [
{ name:'name' },
{ name:'gender' },
{ name:'tel' },
{ name:'mail' },
{ name:'info' }
]
})
});
MyDataStore.load();問題なく取れました。「Ext.data.MemoryProxy」と「Ext.data.ArrayReader」の組み合わせですな。
データ部分のみを別の変数でもたせてつっこむことももちろんできます。
var MyDataArray = [
['佐藤','男','090-8580-4820','wxqm@viutqz.com','リラックスべたで、怠けることを知らない。'],
['鈴木','男','090-8407-7990','mlcs@cyppsi.com','正しいことは、唯一つだと思っている。'],
['高橋','女','090-7749-4837','xvrf@ozmzwj.com','いつも公平であるかどうか気にかける。'],
['田中','男','090-1500-0781','rhqt@devgce.com','さびしがり屋で、家族と行動をともにしたがる。'],
['渡辺','女','090-0643-1860','xhiw@hbaanj.com','仕事のミスはほんの少しでも気にする。'],
['伊藤','男','090-6000-9422','ctcf@iylilz.com','義理硬いが、人づきあいを避ける。'],
['山本','女','090-2739-6835','cakc@owivmj.com','シャイで人見知り。'],
['中村','男','090-9009-5068','uvei@bypdib.com','柔軟な考え方や生き方がしにくい。'],
['小林','男','090-2454-0886','mxlg@qzdenx.com','いつも緊張して、体や関節がこわばっている。'],
['加藤','男','090-1704-6387','hlpd@gulpta.com','優等生気質で、決まりを守るのは当たり前と考える。'],
['吉田','男','090-9682-4887','hnch@evcmuq.com','言葉使いがしっかりと、ていねいであることが多い。'],
['山田','女','090-5429-8868','xouy@pclzhz.com','ナチュラリストで、スポーツを愛好することが多い。'],
['佐々木','女','090-4249-0096','prqg@hhnsfe.com','何事もねばならない、すべきであると考えがち。'],
['斎藤','男','090-4454-8984','tole@bwluxz.com','努力家・勤勉家。'],
['山口','女','090-6533-0520','awro@oagsbb.com','人目を気にして、恥意識がかなり強い。'],
['松本','女','090-6997-9366','uubz@mzrfvd.com','性急で待てない気分になり、イライラしやすい。'],
['井上','男','090-8942-1284','ihbv@wwmirx.com','狭量だが、言うことに裏表がない。']
];
var MyDataStore = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(MyDataArray),
reader: new Ext.data.ArrayReader({
fields: [
{ name:'name' },
{ name:'gender' },
{ name:'tel' },
{ name:'mail' },
{ name:'info' }
]
})
});
MyDataStore.load();ついでに可変部分であるレコード部分も外で変数でもたせてつっこむと…
var MyDataArray = [
['佐藤','男','090-8580-4820','wxqm@viutqz.com','リラックスべたで、怠けることを知らない。'],
['鈴木','男','090-8407-7990','mlcs@cyppsi.com','正しいことは、唯一つだと思っている。'],
['高橋','女','090-7749-4837','xvrf@ozmzwj.com','いつも公平であるかどうか気にかける。'],
['田中','男','090-1500-0781','rhqt@devgce.com','さびしがり屋で、家族と行動をともにしたがる。'],
['渡辺','女','090-0643-1860','xhiw@hbaanj.com','仕事のミスはほんの少しでも気にする。'],
['伊藤','男','090-6000-9422','ctcf@iylilz.com','義理硬いが、人づきあいを避ける。'],
['山本','女','090-2739-6835','cakc@owivmj.com','シャイで人見知り。'],
['中村','男','090-9009-5068','uvei@bypdib.com','柔軟な考え方や生き方がしにくい。'],
['小林','男','090-2454-0886','mxlg@qzdenx.com','いつも緊張して、体や関節がこわばっている。'],
['加藤','男','090-1704-6387','hlpd@gulpta.com','優等生気質で、決まりを守るのは当たり前と考える。'],
['吉田','男','090-9682-4887','hnch@evcmuq.com','言葉使いがしっかりと、ていねいであることが多い。'],
['山田','女','090-5429-8868','xouy@pclzhz.com','ナチュラリストで、スポーツを愛好することが多い。'],
['佐々木','女','090-4249-0096','prqg@hhnsfe.com','何事もねばならない、すべきであると考えがち。'],
['斎藤','男','090-4454-8984','tole@bwluxz.com','努力家・勤勉家。'],
['山口','女','090-6533-0520','awro@oagsbb.com','人目を気にして、恥意識がかなり強い。'],
['松本','女','090-6997-9366','uubz@mzrfvd.com','性急で待てない気分になり、イライラしやすい。'],
['井上','男','090-8942-1284','ihbv@wwmirx.com','狭量だが、言うことに裏表がない。']
];
var MyDataRecord = [
{ name:'name' },
{ name:'gender' },
{ name:'tel' },
{ name:'mail' },
{ name:'info' }
];
var MyDataStore = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(MyDataArray),
reader: new Ext.data.ArrayReader({},MyDataRecord)
});
MyDataStore.load();「Ext.data.Store」のところが非常にすっきりしましたね。(何故「MyDataRecord」の部分が「{}」の外へ当てはめれるのかは前回を見てください)
よく「Ext.data.MemoryProxy」と「Ext.data.ArrayReader」を組み合わせたクラスである「Ext.data.SimpleStore」が紹介されているが、
ExtJS3.0ではそのようなクラスがAPIドキュメントにもないのでなくなったんでしょうか?
ところで「MyDataRecord」の部分ですが、「name: 」指定だけの場合は
var MyDataRecord = [ name, gender, tel, mail, info ];のように簡潔に書けるようだが、いきなりこんな見ると混乱するよな〜。
またこの部分ではXMLタグ名を指定するだけでなくあれこれやるところでもあるけれども、ついでだからそれらもちょっとおさえておこう。
主要なものは以下の4つを覚えておくとよい。
{
namme: '',
mapping: '',
type: '',
dateFormat:
}○name…ExtJSで参照できる新しい名前
必須。元のXMLタグ名と同じ名前を指定するならmappingは不要。
mappingを書かずにかつXMLにないタグ名を書いたらデータは表示されない。
○mapping…元のXMLタグ名
そのままの通り。ただこれを使う場合は同じXMLタグ名で複数のノードが設定されている場合だ。
その場合は「元のXMLタグ名:nth(何番目)」と指定するとよい。
例えば電話番号がふたつあって
<tel>090-1234-9876</tel> <tel>06-1111-9999</tel>という場合、
{ name:'tel1', mapping:'tel:nth(1)' }
{ name:'tel2', mapping:'tel:nth(2)' }とすればいいというわけ。ただしこれはXMLの場合でJSONなら
{ name:'tel1', mapping:'tel[0]' }
{ name:'tel2', mapping:'tel[1]' }となるので要注意。○type…表示できる値に変換するためのデータタイプ
auto : デフォルト。変換しない。
string : 文字列型
int : 数値型
float : 浮動小数点型
boolean : ブーリアン型、つまりtrueかfalse
date : 日付型
どれぐらい確かなのか制約があるのかが感覚的にわからない。試しに日本語文字列の値をもつものに「type:'int'」とやってみたけど、表示上は変わりなかった。
恐らくrendererとかで何か処理をする場合に型を意識しないといけない時にいるのだろうと予想いまのところ。
○dateFormat…日付表示のためのフォーマット指定
日付のデータならここで日付のフォーマットを指定して表示を制御できる。
例えば「dateFormat: 'n/j h:i'」とすれば「3月1日 03:05」という風になる。
「proxy: 」で「Ext.data.MemoryProxy」を使ってデータを取得せずに
var MyDataArray = [
['佐藤','男','090-8580-4820','wxqm@viutqz.com','リラックスべたで、怠けることを知らない。'],
['鈴木','男','090-8407-7990','mlcs@cyppsi.com','正しいことは、唯一つだと思っている。'],
['高橋','女','090-7749-4837','xvrf@ozmzwj.com','いつも公平であるかどうか気にかける。'],
['田中','男','090-1500-0781','rhqt@devgce.com','さびしがり屋で、家族と行動をともにしたがる。'],
['渡辺','女','090-0643-1860','xhiw@hbaanj.com','仕事のミスはほんの少しでも気にする。'],
['伊藤','男','090-6000-9422','ctcf@iylilz.com','義理硬いが、人づきあいを避ける。'],
['山本','女','090-2739-6835','cakc@owivmj.com','シャイで人見知り。'],
['中村','男','090-9009-5068','uvei@bypdib.com','柔軟な考え方や生き方がしにくい。'],
['小林','男','090-2454-0886','mxlg@qzdenx.com','いつも緊張して、体や関節がこわばっている。'],
['加藤','男','090-1704-6387','hlpd@gulpta.com','優等生気質で、決まりを守るのは当たり前と考える。'],
['吉田','男','090-9682-4887','hnch@evcmuq.com','言葉使いがしっかりと、ていねいであることが多い。'],
['山田','女','090-5429-8868','xouy@pclzhz.com','ナチュラリストで、スポーツを愛好することが多い。'],
['佐々木','女','090-4249-0096','prqg@hhnsfe.com','何事もねばならない、すべきであると考えがち。'],
['斎藤','男','090-4454-8984','tole@bwluxz.com','努力家・勤勉家。'],
['山口','女','090-6533-0520','awro@oagsbb.com','人目を気にして、恥意識がかなり強い。'],
['松本','女','090-6997-9366','uubz@mzrfvd.com','性急で待てない気分になり、イライラしやすい。'],
['井上','男','090-8942-1284','ihbv@wwmirx.com','狭量だが、言うことに裏表がない。']
];
var MyDataStore = new Ext.data.Store({
reader: new Ext.data.ArrayReader({
fields: [
{ name:'name' },
{ name:'gender' },
{ name:'tel' },
{ name:'mail' },
{ name:'info' }
]
})
});
MyDataStore.loadData(MyDataArray);「Ext.data.Store」のloadData()メソッドを使ってデータオブジェクトを直接つっこむという方法もあるようだ。最後にすご〜く初歩的なことなんですが、はっきり意識して見るとちょっと前進したような気になります。
なんのこっちゃわかりませんが、ここなんでこんな書き方するんやろう?とか、こことここ似てるんやけどちょこっと違ってなんか違和感があるなぁ〜とか、結構スルーしているところを「それはそんなもんや、そう決まっているから仕方ねぇ」と軽く思うのではなく、ちょっと意識して理解してみるとなんかちょっと自分がjavascriptわかってきた!と思って気が楽になるものです。
例えば、
var MyDataArray = [
['佐藤','男','090-8580-4820','wxqm@viutqz.com','リラックスべたで、怠けることを知らない。'],
['鈴木','男','090-8407-7990','mlcs@cyppsi.com','正しいことは、唯一つだと思っている。'],
['高橋','女','090-7749-4837','xvrf@ozmzwj.com','いつも公平であるかどうか気にかける。'],
['田中','男','090-1500-0781','rhqt@devgce.com','さびしがり屋で、家族と行動をともにしたがる。'],
['渡辺','女','090-0643-1860','xhiw@hbaanj.com','仕事のミスはほんの少しでも気にする。'],
['伊藤','男','090-6000-9422','ctcf@iylilz.com','義理硬いが、人づきあいを避ける。'],
['山本','女','090-2739-6835','cakc@owivmj.com','シャイで人見知り。'],
['中村','男','090-9009-5068','uvei@bypdib.com','柔軟な考え方や生き方がしにくい。'],
['小林','男','090-2454-0886','mxlg@qzdenx.com','いつも緊張して、体や関節がこわばっている。'],
['加藤','男','090-1704-6387','hlpd@gulpta.com','優等生気質で、決まりを守るのは当たり前と考える。'],
['吉田','男','090-9682-4887','hnch@evcmuq.com','言葉使いがしっかりと、ていねいであることが多い。'],
['山田','女','090-5429-8868','xouy@pclzhz.com','ナチュラリストで、スポーツを愛好することが多い。'],
['佐々木','女','090-4249-0096','prqg@hhnsfe.com','何事もねばならない、すべきであると考えがち。'],
['斎藤','男','090-4454-8984','tole@bwluxz.com','努力家・勤勉家。'],
['山口','女','090-6533-0520','awro@oagsbb.com','人目を気にして、恥意識がかなり強い。'],
['松本','女','090-6997-9366','uubz@mzrfvd.com','性急で待てない気分になり、イライラしやすい。'],
['井上','男','090-8942-1284','ihbv@wwmirx.com','狭量だが、言うことに裏表がない。']
];
var MyDataRecord = [
{ name:'name' },
{ name:'gender' },
{ name:'tel' },
{ name:'mail' },
{ name:'info' }
];この部分など、よく考えたらというか分かっている人には笑われそうですが、単純構造としてはvar MyDataArray = [
[]
];
var MyDataRecord = [
{}
];のようになるでしょう?ずっとコードを書きながら、「[[]]」と「[{}]」とデータとしては同じようなものなのになんで違うんだろうなぁ〜と頭の隅で思っているわけです。「[]」を「[]」でくくったりして「[[」や「]]」が続いたりすると私なんかはすっごく違和感があるわけです。
でも「[]」は中の要素をカンマ区切りで配列にする際に使う記号で「{}」は中の要素を「要素名:内容」という書き方をするオブジェクトリテラルなんだということを理解しつつ一旦立ち止まってつぶさに見るとなるほどなぁと思える。
違和感は慣れていないせいもあるし、やはりその感覚があるということはその知識がしっかりと体にしみついていないということなのでしょう。
なんとかく見ていたものをしっかり意識して確認しながら理解するとあぁ一歩進んだなと、ひいてはExtJSを理解できそうだと自信を持つことにもつながるというわけですな。