Question

我正在尝试将Ext.tree.Panel与Ext.data.TreeStore和Ext.data.Model一起使用。我认为我正在做正确的事情，但在检查我的树时，我可以看到一个美丽的'空'，这是不正常的。而且我认为这可能是因为我的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个字段）默认存在字段'leaf'和'children'。所以我不确定我必须提到它们。所有这些字段都是我的json响应中的那些字段（但是它们并不总是存在于每个项目中，就像您将在下面的示例中看到的那样）。因为我真的不明白ExtJS是如何工作的（这是我练习的第一周），我想知道我是否真的需要在我的模型中写入我的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'。这个url是将json响应设置为servlet的url。它导致了这种方法：

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（）是未定义的，但我把它放在配置块中，所以getters＆amp;应该生成setter，并且构造函数中的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调试。：）

现在我可以多欣赏它了。

谢谢

ExtJS4，tree.Panel使用json代理null

1 个答案: