何日もの間、私はこれを正しく行う方法についての説明を探していました。JS または Ajax の適切なチュートリアルを見つけようとしましたが、見つけたものはすべてかなり基本的なもので、十分に深くはなりませんでした。Python で問題を解決したいときは、Python.org にアクセスします。PHP の場合は php.net を使用しますが、JS と Ajax の適切なリソースはまだ見つかりません。どんなヒントでも大歓迎です。
そこで、私が何をしたかを説明しようと思います。私はかなり単純なページを持っています。左側に div があり、右側に div があります。左側にはレジストリを表すツリーがレンダリングされ、右側には値が表示および編集されます。
ツリーはグローバル変数に格納されます。グローバル変数の使用に関するすべての警告を読みましたが、この場合は正当化されると思います。このページにアクセスすると、ツリーが表示されます。
var tree;
...
function initTree(treeRootConfig) {
return new Ext.tree.TreePanel({
renderTo : 'tree'
,width : 500
,height : 498
,autoScroll : true
,resizable : true
,useArrows : false
,animate : true
,loader : {
dataUrl : urls.urlLoadTree,
listeners: { beforeload : function(treeLoader, node) {} }
},listeners: {
click : function(node, e) { valueGrid.load(node.id); }
,contextmenu : function(node, e) {
cmPath.node = node;
cmPath.showAt(e.getXY());
},
},root : treeRootConfig
});
}
ツリーが表示しているパスのテキスト表現を保持するテキストフィールドがあります。
function initTextfieldPath() {
return new Ext.form.TextField({
fieldClass : 'textfieldPath',
applyTo : 'path',
enableKeyEvents: 'true',
listeners : { change : function() { refreshTree(); } },
});
}
すべてのノードは、パス内の「フォルダー」です。新しいノードにアクセスすると、それに応じてテキストフィールドの値が変更されます。これはうまくいっています。テキストフィールドに新しいパスが入力されたら、ツリーをリロードしてノードを表示します。パスが解析された後、Ajax を使用してデータベースからノードを取得します。これは、ノードの文字列表現を取得し、JSON を介してエンコードし、ノードをツリーの新しいルートとして設定しようとするところまで機能します。
function refreshTree() {
Ext.Ajax.request({
url : urls.DirectAccess
,scope : tree
,params : { path: textfieldPath.getValue() }
,success: function(response, opts) {
alert(response.responseText);
tree.setRootNode(Ext.util.JSON.decode(response.responseText)); }
,failure: function(response, opts) { noConnection(response); }
});
}
ご想像のとおり、アラートはテスト目的でのみ存在します。サーバー要求が完了すると、データベースから取得されたノードの文字列表現が表示されます。このノードをツリーに設定するだけでは、私にはできません。
私たちが持っている ext ライセンスは、Ext 3.4.0 用です。