0

我正在尝试将 Ext.tree.Panel 与 Ext.data.TreeStore 和 Ext.data.Model 一起使用。我认为我做的事情是正确的，但是当检查我的树时，我可以看到一个美丽的“空”，这是不正常的。我认为这可能是因为我的 json url。

让我解释一下我是如何进行的。这是我定义模型的方式：

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 的工作原理（这是我练习的第一周），所以我想知道我是否真的需要在我的模型中写入我的 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 的那个。它导致了这种方法：

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 块中，所以应该生成 getter 和 setter，并且构造函数中的 console.log(this.myrender) 写了一些好东西，所以我没有了解发生了什么。最后但并非最不重要的是我的 tree.getRootNode() 为空......

如果有更好的 ExtJS 理解的人可以建议我，我们将不胜感激。我觉得我使用 json url 的方式有问题，但我不明白为什么。或者也许是别的东西......

感谢您的时间。

小马

4

1 回答 1

0

好的，所以我从不太重要的项目中研究了其他树，以熟悉这个概念以及 javascript 和 EXTJS。所以现在我回到这个，我可以说它实际上工作得很好，但是在树构建之后我没有正确获取信息。原因是我正在将一些项目从 extjs-3.2.1 迁移到 extjs-4.2.1 并且整个树系统已经改变。我以前从节点获取信息的操作node.attributes.something不再起作用，我必须通过node.data.somethingor 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调试。:)

现在我可以更欣赏它了。

谢谢

于 2013-07-04T13:04:56.693 回答