ExtJSについて3

ExtJs3.1で、treepanal のleaf のクリックしたとき、MySQLのDBを検索して戻ってくるJSONデータでgridpanel の内容を更新する方法。これがわからず何日もはまっていた。
[sql 文の ****(これをTASKで渡す) ** from A where A.a = ****(これを param1 で渡す)とする。]    store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: ‘****.php’,
method: ‘POST’
}),
// ****.php がDBへの単機能(select,insert,update,delete)ごとに分かれているときは、機能ごとに****.phpが有るときはここでbaseParams を設定
   // ****.php で複数の機能のsql文を使用するときは、if文で切り替えるときは、ここでbaseParams は使わない
    baseParams:{task: “SELECT” },
   reader: new Ext.data.JsonReader({
  root: ‘results’,
  totalProperty: ‘total’,
  id: ‘id’
},[…..
[gridpanel にこの store を設定] grid = new Ext.grid.EditorGridPanel({
store: store,
………
[grid にデータをセットする] // ****.php がDBへの単機能(select,insert,update,delete)ごとに分かれているときは、params はこのように設定
grid.load({params:{param1:”grp1″}});

   // ****.php で複数の機能のsql文を使用するときは、paramsはこのように設定
grid.load({params:{task:”SELECT”, param1:”grp1″}});

[treepanel に以下のようなノードを設定] var root = new Ext.tree.TreeNode({
    id:”root”, text:”root”, leaf:false, draggable:false
});
var node1 =new Ext.tree.TreeNode({
    id:”idx1″, text:”グループ1”, leaf:true, draggable:true
});
root.appendChild( node1 );

var tree = new Ext.tree.TreePanel({
title:’SampleTree’,
id:’SampleTree’,
useArrows:true,
enableDD:true,
root:root
});

[tree のleaf をクリックしたときの処理] Ext.get(‘SampleTree’).on(‘click’,function(){
node=tree.getSelectionModel().getSelectedNode();
changegrid(node.id);
});
// ****.php に条件を渡し、戻ってきたJSONデータでgrid を更新する
function changegrid(id){
// baseParams を設定している場合
    if(id==”idx1″) store.reload({params:{param1:”grp1″}});

// baseParamsは設定せず、paramas だけで制御する場合
    if(id==”idx1″) store.reload({params:{task: “SELECT” ,param1:”grp1″}});
}
これで、tree の”グループ1”というleaf をクリックしたとき、grid の内容が更新される。
これが分かるまで、2週間位唸っていた。
ExtJS2.2とバージョンが古いが、パーツ開発Memo(http://e-mytools.blogspot.com)に感謝。
頭の中をすっきりさせてくれたIBMの「ExtJS 入門者の最初の壁」(http://www.ibm.com/developerworks/jp/web/library/j_wa-aj-extjs/#N100A0)に多謝。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

前の記事

もうひとつの視覚

次の記事

ExtJSのtreegridについて