PDA

View Full Version : Ext Designerで作成したStoreについて



koujiid
17 Jul 2010, 7:31 AM
Ext Designerで作成したStoreとWindowのソースの活用方法について質問です。
Ext DesignerでのPreviewでは、実際に値が取れるのですが、実際に配置すると
WindowおよびGridは表示されるのですが、値が表示されません。
WindowのインスタンスwinのGridのstoreにstoreのインスタンスmastを設定すればよい気がするのですが、
具体的な方法がよくわかりません。:-/
参考になる資料のありかなどを教えていただけませんでしょうか?
よろしくお願いいたします。

----JavaScriptソース----

Ext.BLANK_IMAGE_URL='./extjs/resources/images/default/s.gif';

TestStore= Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
Master.superclass.constructor.call(this, Ext.apply({
storeId: 'MyStore',
url: 'http://localhost:8084/TestWebAppli/',
record: 'list',
autoLoad: true,
autoSave: true,
fields: [
{
name: 'Name'
}
]
}, cfg));
}
});

MyWindowUi = Ext.extend(Ext.Window, {
title: 'リスト一覧',
width: 1007,
height: 682,
autoScroll: true,
collapsible: true,
titleCollapse: true,
maximizable: true,
id: 'Window0001',
initComponent: function() {
this.items = [
{
xtype: 'grid',
title: '',
store: 'MyStore',
height: 649,
id: 'Grid0001',
columns: [
{
xtype: 'gridcolumn',
header: '名前',
sortable: true,
width: 150,
dataIndex: Name',
id: 'Name'
}
]
}
];
MyWindowUi.superclass.initComponent.call(this);
}
});


Ext.onReady(function(){

var win;
var mast;
mast=new TestStore();
mast.load();
win=new MyWindowUi();
//このタイミングでstoreを設定する?
win.show();

});

koujiid
22 Jul 2010, 3:07 PM
申し訳ありません。
提示させていただいたソースに転記ミスがありました。
(誤)「Master.superclass.constructor.call(this, Ext.apply({」

(正)「TestStore.superclass.constructor.call(this, Ext.apply({」

この修正をしてもうまく動作しません。

「'http://localhost:8084/TestWebAppli/'」は、
以下のXMLを返すサーブレットです。

<Master>
<list>
<Name>参考名称</Name>
</list>
</Master>



----JavaScriptソース(修正後)----

Ext.BLANK_IMAGE_URL='./extjs/resources/images/default/s.gif';

TestStore= Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
TestStore.superclass.constructor.call(this, Ext.apply({
storeId: 'MyStore',
url: 'http://localhost:8084/TestWebAppli/',
record: 'list',
autoLoad: true,
autoSave: true,
fields: [
{
name: 'Name'
}
]
}, cfg));
}
});

MyWindowUi = Ext.extend(Ext.Window, {
title: 'リスト一覧',
width: 1007,
height: 682,
autoScroll: true,
collapsible: true,
titleCollapse: true,
maximizable: true,
id: 'Window0001',
initComponent: function() {
this.items = [
{
xtype: 'grid',
title: '',
store: 'MyStore',
height: 649,
id: 'Grid0001',
columns: [
{
xtype: 'gridcolumn',
header: '名前',
sortable: true,
width: 150,
dataIndex: Name',
id: 'Name'
}
]
}
];
MyWindowUi.superclass.initComponent.call(this);
}
});


Ext.onReady(function(){

var win;
var mast;
mast=new TestStore();
mast.load();
win=new MyWindowUi();
//このタイミングでstoreを設定する?
win.show();

});

yuki
26 Jul 2010, 6:40 PM
ソースコードを見る限り、XMLをStoreにマッピングするための設定がされていないように考えられます。XMLをXmlStoreに読み込むためには、XmlStoreのプロパティ設定で、recordを設定し、また必要に応じてfield別のmappingも設定してあげる必要があります。

XmlStoreの設定方法についてはAPIドキュメント (http://www.sencha.com/deploy/dev/docs/?class=Ext.data.XmlStore)をご確認ください。

koujiid
27 Jul 2010, 3:51 AM
fields: [
{
name: 'Name'
}
]

fields: [
{
name: 'Name',mapping:'Name'
}
]
APIドキュメントを参考にしてに変更してマッピングしてみたのですが、やはりうまくいきません。
視点が間違っていますでしょうか?
引き続きご教授いただけませんでしょうか?

yuki
27 Jul 2010, 3:57 AM
2度目に投稿されているXMLが正しいとすると、recordに"list"を指定してあげれば、"Name"が読み込まれます。

koujiid
27 Jul 2010, 4:41 AM
??
やはり、小生の視点がずれているのでしょうか?

url: 'http://localhost:8084/TestWebAppli/',
record: 'list',
autoLoad: true,
autoSave: true,
fields: [
{
name: 'Name'
}
]

url: 'http://localhost:8084/TestWebAppli/',
record: 'list',
autoLoad: true,
autoSave: true,
fields: [
{
name: 'Name',mapping:'Name'
}
]

に変更したので、recordは元々設定しているつもりなのですが・・・

yuki
27 Jul 2010, 8:27 PM
失礼しました。最初のコードにもrecord:"list"は設定されてましたね。これで動かないのであれば、あとはFirebug等で、きちんとXMLを受信しているのか、そしてそれが正しく読み込まれているのかを確認するぐらいしかないですかね。

satoshiokita
11 Aug 2010, 5:46 AM
すでに解決してしまっているかもしれませんが、参考までに返信しておきます。

はじめてExt Designerを使うときは、一度以下URLに埋め込まれているビデオのチュートリアルを実行してみるとExt DesignerでのGridとStoreの設定の仕方がわかると思います。

http://www.sencha.com/products/designer/


>この修正をしてもうまく動作しません。
>
>「'http://localhost:8084/TestWebAppli/'」は、
>以下のXMLを返すサーブレットです。
これは、サーブレットではなく、コンテキスト(Webアプリケーションのディレクトリ)だと思われます。以下urlのように、直接サーブレットを設定すれば問題ないはずです。


MyStore = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
MyStore.superclass.constructor.call(this, Ext.apply({
storeId: 'MyStore',
url: 'GetXMLServlet',
autoLoad: true,
record: 'list',
fields: [
{
name: 'Name'
}
]
}, cfg));
}
});
Ext.reg('MyStore', MyStore);new MyStore();



また、Storeの設定で、autoload:trueとしているので、以下の「このタイミングでstoreを設定する」という部分は不要です。


Ext.onReady(function(){

var win;
var mast;
mast=new TestStore();
mast.load();
win=new MyWindowUi();
//このタイミングでstoreを設定する?
win.show();
});


APIドキュメントを確認すると、単純なXML文字列をGridに表示するだけなので、yuki さんの返信で書かれていたmapping設定は不要のようです。
http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.XmlStore


また、実際に動作させたTextWebAppli.xds,サーブレット、テスト用XMLを添付しておきます。

koujiid
12 Sep 2010, 7:27 AM
遅くなり申し訳ございません。
提示いただいたサンプルも、やはり、Ext Designer上ではうまくデータが反映出来るのですが、
Ext Designerから出力されたコードでは、Storeの内容が反映されません。
試しに、サーブレットではなく、XMLファイルにしてみたのですが、この場合でも、反映されません。
スクリーンキャストとの違いは、使用しているストアがXMLということぐらいなのですが・・・
どうも、データの反映がうまくいっていないようです。

satoshiokita
13 Sep 2010, 8:31 AM
設定の確認
Ext Designerの設定で、「URL Preffix」がコンテキストを指定していますでしょうか。もし指定しているなら、アプリケーションサーバが起動していないと、Ext DesignerからもXMLStoreのロードはできないはずです。
22381

Storeのurlプロパティの確認
また、「URL Prefix」にコンテキストをした場合、「url」にリクエストパスを指定します。
22382

Ext Designerに上記の設定を行った場合、ブラウザからhttp://localhost:8080/TestWebAppli/GetXMLServletでアクセスできる状態にしておけば、Ext Designerからのロードも上記画像のように(MyStore 1 records loadedの部分)可能です。逆に言うと、アプリケーションサーバが起動していて、GetXMLServletにリクエストが送れる状態でないと、ロード出来ません。


Eclipse3.6 + Tomcat5.5のEclipseプロジェクトのzipファイル
22380
前回の返信で、ファイルをいくつか添付しましたが実際に動作する状態で添付いたします。

WebContext/TestWebAppli.xdsが入っています。またExt Designerからソースコードを生成した状態です。
http://localhost:8080/TestWebAppli/GetXMLServletで、サーブレットにGETリクエストで「参考名称」が取得できます。
http://localhost:8080/TestWebAppli/xds_index.htmlで、下記のようにデータが取得できます。


Chrome v6での動作確認したキャプチャ
22383

一度設定ができてしまえば感覚をつかんでいけると思います。Ext Designerベースのサンプルはあまりネット上に存在しないので、大変だとは思いますが頑張ってください。それでは。

koujiid
13 Dec 2010, 8:15 AM
皆様、ご協力ありがとうございました。
問題が解決しました。また、問題となっていた部分の解決方法がわかりました。
今回の問題は、以下の部分でした。
XMLデータが取得できるServletが存在する環境で、
 ①Ext Designerでは、XMLStoreでデータの取得が出来ました。
  これは、url(XMLStore)で指定してもurlprefix(Edit)+url(XMLStore)どちらも可能でした。
 ②しかし、いったんExt DesignerでExportしてWebブラウザからファイルを開くと
データがグリッドに反映しない。
上記の問題がどうしても解決できず、繰り返し、開発環境の変更や、動作環境を変更し、
ようやく、問題の解決方法がわかってきました。
簡単に言うと、「Servletと同一WebアプリにwarパッケージにしてDeployし、相対パスでservletを呼び出す。」
ということです。
例えば、
 xds_index.htmlおよびjsファイル・・・apacheのドキュメントルートに配置
 servlet・・・同一サーバの「http://192.168.0.1:8080/sample/sampleservlet」でアクセス可能
にするとNGですが、
 「http://192.168.0.1:8080/sample/xds_index.html」でアクセスできるように、サーブレット共に配備
するとOKとなります。

Ext Designerでは、必ずしも、サーブレットと同一ドメインになくても動作するのですが、実際の動作環境としては、だめなようです。
ということで、皆様のおかげで解決することができました。
ありがとうございました。