如何调试 Extjs 商店 url:带有萤火虫的路径? [英] How to debug Extjs store url: path with firebug?

问题描述

我正在使用 browser-layout 我的应用程序的示例.

I am using the browser-layout example for my application.

我正在尝试添加一个 树网格 到它.我定义了一个新类，但是当我调用我的树网格时，我可以看到网格但里面没有数据.

I'm trying to add a tree grid to it. I defined a new class, but when I call my tree grid I can see the grid but no data inside.

我要做的是在单独的文件中定义树网格.我的主文件是 layout-browser.js 我需要在其中的选项卡中添加这个(和其他).我可能做错了什么?

What I'm trying to do is define the tree grid in a separate file. My main file is the layout-browser.js and I need to add this (and others) in the tabs I have in it. What might I be doing wrong?

这是我的代码:

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);

Ext.define('Task', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'task', type: 'string' },
        { name: 'user', type: 'string' },
        { name: 'duration', type: 'string' }
    ]
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    proxy: {
        type: 'ajax',
        //the store will get the content from the .json file
        url: 'treegrid.json'
    },

    folderSort: true
});



var tree = new Ext.tree.Panel({
title: 'Core Team Projects',
store : store,

columns:[
{
    header: 'Task',
    dataIndex: 'task',
    width: 80
},{
    header: 'Duration',
    width: 80,
    dataIndex: 'duration',
    //align: 'center',
    //sortType: 'asFloat'

},{
    header: 'Assigned To',
    width: 80,
    dataIndex: 'user'
}] 
});


Ext.define("Ext.app.myTreeGrid", {
    extend: "Ext.panel.Panel",


width: 300,
height : 300,
items: [tree]

});

感谢您的宝贵时间和帮助

thank you for ur time and help

推荐答案

var store = Ext.create('Ext.data.TreeStore', {
proxy:{
    type: 'ajax',
    url: 'myTree.json',
},
reader:{
    type: 'ajax',
    root: 'nodes',
    record: 'leaf'
 }  
}); 


var myTree = Ext.create('Ext.tree.Panel', {
    store: store,
    rootVisible: false,  
    border: false,
    renderTo:Ext.getBody() //missing

});  

JSON

  {

    children: [
        { text:"Clients", expanded: true,
            children: [{ text:"MAIN", leaf: true }]
        }
    ]
  }

这是一个工作示例，您可以定义 myTree 并在浏览器布局中调用它！

Here is an working example, u can define myTree and call it in your Browser-layout!

转到firebug NET控制台，刷新页面并搜索treeGrid.json，

鼠标悬停查看完整网址

使用正确的路径从 localstore 更新存储到带有 .json 的文件夹


立即尝试！

Go to firebug NET console, refresh the page and search for treeGrid.json,

Hover over with mouse to see full URL

Update store with correct path from localstore to a folder with your .json


Try now!

这篇关于如何调试 Extjs 商店 url:带有萤火虫的路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！