ExtJS4，tree.Panel為空，使用JSON代理

Question

我正在嘗試將Ext.tree.Panel與Ext.data.TreeStore和Ext.data.Model一起使用。 我認為我做的不錯，但是當檢查我的樹時，我可以看到美麗的“ null”，這是不正常的。 而且我認為可能是因為我的json網址。

讓我解釋一下我如何進行。 這是我定義模型的方式：

Ext.define('SelectedModel', {
 extend: 'Ext.data.Model',
 fields: [
    {name: 'text', type: 'string'},
    {name: 'id',  type: 'string'},
    {name: 'leaf', type: 'bool'},
    {name: 'children',  type: 'auto'},
    {name: 'singleClickExpand',  type: 'bool'},
    {name: 'status',  type: 'int'},
    {name: 'checked', type: 'boolean'},
    {name: 'fullIceCode',  type: 'string'},
    {name: 'withMenu',  type: 'bool'},
 ]
});

我讀到默認情況下，所有樹中都存在“葉子”和“子代”字段（其他20個字段）。 所以我不確定我必須提到他們。 所有這些字段恰好是我的json響應中出現的那些內容（但是，並非每個項目中都總是存在這些字段，就像您在下面的示例中看到的那樣）。 因為我不太了解ExtJS的工作原理（這是我練習的第一周），所以我想知道我是否真的需要在Model中編寫json響應中存在的所有字段，還是僅寫在其中的每個項目中的字段？我的樹。

讓我們看看如何在我的樹中定義我的商店：

store: Ext.create("Ext.data.TreeStore",{
         model: 'SelectedModel',
         proxy: {
               type: 'ajax',
                url: this.myaction,
                reader: {
                        type: 'json',
                }
         }  
})

在Tree構造函數的末尾，如果我編寫console.log（this.myaction），則可以得到我想要的確切內容，即“ stSearchAction.do?action=product_tree”。 這個網址是將json響應設置為servlet的網址。 它導致這種方法：

private ActionForward getSpecialToolProductTree(
        HttpServletRequest request, HttpServletResponse response) throws SystemException, ApplicativeException  {

    if (strJsonProduct == null)
    {
        strJsonProduct = getAndCreateSessionIfNeeded(request).getStrJsonProductSelector();
    }
    System.out.println(strJsonProduct);
    setResponse(response, strJsonProduct) ;

    return null ; 
}

您可以看到的System.out.println（strJsonProduct）精確地顯示了我想要的json字符串：

[{text : 'CASE CONSTRUCTION', id : '5 -122001754' , leaf : false , children : [{text : 'Engines', ... ... ... ... ... ... ..., singleClickExpand : true , status : 1 , checked : false , fullIceCode : 'Y.A.01.001', withMenu : true }
] , singleClickExpand : true , status : 1 }] , singleClickExpand : true , status : 1 }] , singleClickExpand : true , status : 1 }]

我現在看不出問題出在哪里，但我承認有時候我可能很盲目。

現在的樹：

Ext.define('Application.TreePanel', {
extend: 'Ext.tree.Panel',
requires: ['Ext.data.TreeStore'],
myaction: 'Unknown Url',
myrender: 'Unknown Render',
xtype: 'check-tree',       
rootVisible: false,
useArrows: true,
frame: true,
title: 'Unknown title',
width: 250,
height: 300,

constructor: function(myaction, mywidth, myheight, myrender, mytitle) {
    if (myaction) {
        this.myaction = myaction;
    }
    if (myrender) {
        this.myrender = myrender;
    }
    if (mytitle) {
        this.title = document.getElementById(mytitle).innerHTML;
    }
    if (mywidth) {
        this.width = mywidth;
    }
    if (myheight) {
        this.height = myheight;
    }
    console.log(this.height);
 },

 config:{
     renderTo: this.myrender,


     store: Ext.create("Ext.data.TreeStore",{
         model: 'SelectedModel',
         proxy: {
               type: 'ajax',
                url: this.myaction,
                reader: {
                        type: 'json',
                }
            }   
     })
 }

});

當我通過console.log檢查構造函數中設置的不同屬性時，我得到的正是我想要的...顯示給您的所有extJs代碼都在同一文件tree421.js中（因為使用ExtJS 4.2.1）。 我認為我的商店有問題，我沒有做正確的事，也許這不是使用url配置作為代理的方式...但是我找不到好的方法。

我得到一些奇怪的結果。 在tree421.js的末尾執行這些行時

var tree = Ext.create("Application.TreePanel", 'stSearchAction.do?action=product_tree', 300, 270, 'tree-div', 'lbl_st_tree_selection');
console.log(tree);
console.log(tree.getSelectionModel());
console.log(tree.getRenderTo());
console.log(tree.getRootNode());

我會讀

j {myaction: "stSearchAction.do?action=product_tree", myrender: "tree-div", title: "Product selection", width: 300, height: 270…} tree421.js:117
A {events: Object, views: Array[0], modes: Object, selectionMode: "SINGLE", selected: A…} tree421.js:118
undefined tree421.js:119
null tree421.js:120

第二個日志只是一個測試，以查看將要寫的內容，但我並不在乎。 我們可以看到tree.getRenderTo（）是未定義的，但是我將其放在config塊中，因此應該生成getters和setters，並且構造函數中的console.log（this.myrender）寫的很好，所以我沒有了解發生了什么。 最后但並非最不重要的一點是我的tree.getRootNode（）為null ...

如果對ExtJS有更好的了解的人可以為我提供建議，將不勝感激。 我覺得我使用json url的方式有問題，但是我不明白為什么。 或者也許是其他東西...

感謝您的時間。

龐尼

Answer 1

好的，所以我研究了不太重要的項目中的其他樹，以熟悉此概念以及javascript和EXTJS。 因此，現在我回到這本書上，我可以說它確實運行良好，但是在構建樹之后我沒有正確獲取信息。 原因是我正在將某些項目從extjs-3.2.1遷移到extjs-4.2.1，整個樹系統已經更改。 我用來從節點獲取信息的操作node.attributes.something不再起作用，我必須通過node.data.something或node.raw.something 。 就這樣。

我也只需要精確的讀者和樹的根。 無論如何，這是樹的必要部分：

Ext.define('SelectedModel', {
 extend: 'Ext.data.Model',
 fields: [
    {name: 'text', type: 'string'},
    {name: 'id',  type: 'string'},
    {name: 'leaf', type: 'bool'}
 ]
});

var tree = Ext.create('Ext.tree.TreePanel',{
    renderTo:myrender,
    title: document.getElementById(mytitle).innerHTML,
    height: myheight,
    width: mywidth,
    useArrows:true,
    autoScroll:true,
    animate:true,
    ddConfig:{
        enableDrag:false,
        enableDrop:false
    },
    containerScroll: true,
    rootVisible: false,
    frame: true,

    store: Ext.create('Ext.data.TreeStore',{
        model: 'SelectedModel',
        proxy:{
            type: 'ajax',
            url:  myaction,
            reader: {
                type: 'json'       
            },
            root: {
                type: 'async'
            }
        },
        autoLoad: false
});

因此沒有任何問題，我只需要練習一些javascript和extjs4並習慣於進行JavaScript調試。 :)

現在，我可以再欣賞一點。

謝謝