TreeGrid not loading

[mom_vincent]

Hello

I've taken the MVC introduction (http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture) and tried to modify it to load up a treegrid instead, with help from the example here (http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html).

I don't know why, but it doesn't seem to load at all. It never reaches the launch function in Ext.application, I'm assuming it has something to do with the controller not being configured properly, but Firebug isn't showing any errors on the console, so I'm a bit lost.

My code:
main.js

Ext.Loader.setConfig({ enabled: true });

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

Ext.application({
name: 'pr',

appFolder: '', //This is considered root so no name needs to be supplied.

controllers: [
'Control-Product' //filename
],

launch: function () {
console.log('The app was launched');
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'treegrid'
}]
});
}
});

Control-Product.js

Ext.define('pr.controller.Product', {
extend: 'Ext.app.Controller',
views: ['user.TreeGrid'],
stores: ['Store-Products'],
models: ['Model-Product'],

init: function () {
console.log('The controller was instantiated');
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function () {
console.log('The panel was rendered');
}
});

TreeGrid.js

Ext.define('pr.view.user.TreeGrid', {
extend: 'Ext.tree.Panel',
alias: 'widget.treegrid',

initComponent: function () {
this.title = 'Products',
this.store = 'pr.store.Products',
this.collapsible = true,
this.useArrows = true,
this.rootVisible = false,
this.multiSelect = true,
this.singleExpand = false,
//this.renderTo = Ext.getBody(),
this.columns = [{
xtype: 'treecolumn',
text: 'ID',
flex: 1,
dataIndex: 'ID',
sortable: true
},
{
text: 'Price',
flex: 1,
dataIndex: 'Price',
sortable: true
},
{
text: 'Company',
flex: 1,
dataIndex: 'Company',
sortable: true
}];

this.callParent(arguments);
}
});

Model-Product.js


Ext.define('pr.model.Product', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ID', type: 'string' },
{ name: 'Price', type: 'string' },
{ name: 'Company', type: 'string' }
]
});

Store-Products.js


Ext.define('pr.store.Products', {
extend: 'Ext.data.TreeStore',
model: 'pr.model.Product',
proxy: {
type: 'ajax',
//get data from json file for now
url: '/data/products.json'
},
folderSort: true
});

products.json

{"text":".","children": [
{
ID:'1111',
Price:'11.11',
Company:'Company1',
expanded: true,
children:[{
ID:'',
Price:'44.44',
Company:'Company2',
leaf:true
}]
},{
ID:'2222',
Price:'22.22',
Company:'Company1',
expanded: true,
children:[{
ID:'',
Price:'33.33',
Company:'Company3',
leaf:true
}]
}
]}

[mitchellsimoens]

Your file structure needs to match your class structure. So if you have a controller with a name of 'pr.controller.Product' then that controller needs to reside in the app/controller/Product.js file. You have Control-Product in your controllers which does not match your controller.

[mom_vincent]

Yeah after running it through with my colleague we arrived at the same conclusion, I fixed the classnames to match the filenames and all was working :D

[stewardsencha]

/*
Thanks for sharing.
Many of us are doing the same (old examples to MVC), many questions on stack overflow.
I expose my ignorance here in case it helps others.
This shows getting clicks on nodes as well.

Following your pattern worked for me but.

I have three questions remaining

1. Warning: "Store defined with no model. You may have mistyped the model name."

Eventually decided this was a debug warning I can ignore. But not sure.

2. Had to change the way you assigned the store to the panel.

Cannot explain why. Think maybe to do with loading sequence?

3. Data format.

a) The example "text=>':' can be thrown away, just 'children' is good enough

b) I cannot make the final leap, when data comes from the server, the tree does not load.
Yet the self-same data loaded from a file does work. So I'm going to try Ext.Direct,
(that's my chosen path anyway), but I wish I could say what I don't know.


*/



//******************************** tree.js (the app)
Ext.Loader.setConfig({
enabled:true,
paths : {
'Ext' : '../../../ext4/src',
'tree' : '../../../apps/BH/tree'
}
});

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

Ext.application({
autoCreateViewport: true,
name: 'tree',
appFolder: '../../../apps/BH/tree',

controllers:'FaqControl',

launch: function() {
tree.application = this
Ext.QuickTips.init();
console.log('launched');
}
});

//******************************** view/Viewport.js
// Tree app auto creates viewport
// Viewport has tree and a button, button click gets current tree node

Ext.define('tree.view.Viewport', {
extend: 'Ext.container.Viewport',

requires:['tree.view.FaqTreePanel'],

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{region:'center',html:'center'},
{
region: 'east',
xtype:'button',
text:'Fire Some Event',
width:100,
handler:this.onSomeEvent
},
{
region: 'west',
xtype:'faqtreepanel',
width:400
}
]
});
me.callParent(arguments);
},
onSomeEvent:function() {
var t = Ext.ComponentQuery.query('#faqtree')[0]
var nodesSelected = t.getSelectionModel().selected.items;
if(nodesSelected.length > 0)
{
var node = nodesSelected[0];
console.log(node.internalId);
//console.log(t.selModel, t.selNode)
}
}
});

//******************************** tree.js (the app)
// The panel. Hee is where I had to change how you set the store.
// Something to do with loading sequnce maybe, I am not able to explain why

Ext.define('tree.view.FaqTreePanel', {
extend:'Ext.tree.Panel',
alias:'widget.faqtreepanel',
title: 'Topics',
width: 400,
height: 400,

itemId:'faqtree',

//store:'tree.store.FaqStore', // Cannot call method 'getRootNode' of undefined
store:'FaqStore', // works

/* works great
listeners: {

itemclick: {
fn: function(view, record, item, index, event) {
debugger
//the record is the data node that was clicked
//the item is the html dom element in the tree that was clicked
//index is the index of the node relative to its parent
nodeId = record.data.id;
htmlId = item.id;
}
}

},
*/

initComponent: function () {

this.title = 'Products',

//this.store = 'tree.store.FaqStore', // Cannot call method 'getRootNode' of undefined
this.store=Ext.getStore('FaqStore'), // works

this.collapsible = true,
this.useArrows = true,
this.rootVisible = false,
//this.multiSelect = true,
this.singleExpand = false,
this.columns = [{
xtype: 'treecolumn',
text: 'task',
flex: 1,
dataIndex: 'task',
sortable: true
},
{
text: 'user',
flex: 1,
dataIndex: 'user',
sortable: true
},
{
text: 'duration',
flex: 1,
dataIndex: 'duration',
sortable: true
}];
this.callParent(arguments);
}
});

//******************************** model/FaqModel.js
Ext.define('tree.model.FaqModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
//******************************** store/FaqStore.js
Ext.define('tree.store.FaqStore', {
extend: 'Ext.data.TreeStore',
model: 'tree.model.FaqModel',
storeId:'FaqStore',
proxy: {
type: 'ajax',
url: 'http://mysite.dev/apps/BH/tree/treegrid.json'//static file works
// url:'http://mysite/tree' fails see screen print
}

})


//******************************** controller/FaqControl.js

Ext.define('tree.controller.FaqControl', {
extend: 'Ext.app.Controller',

requires: [
'tree.store.FaqStore',
'tree.model.FaqModel',
'tree.view.Viewport'
],
stores:['FaqStore'],
models:['FaqModel'],
views :['FaqTreePanel'],
refs: [
{
ref:'Tree',
selector:'.faqtreepanel'
}
],
init: function() {
console.log('faqControl init')

this.control({
'#faqtree':{itemclick: this.onTreeItemClick}
})
},
onTreeItemClick:function(view, record) {
var t = this.getTree()
console.log('tree item click',view,record)
},
onTreeClick:function() {
console.log('click')
},
onTreeMouseEnter:function() {
console.log('mouseenter')
},
afterTreeRender:function() {
console.log('after tree render')
}
})

//******************************** tree/treegid.json (yuck)
/*
This file works, but when generated from the server side
I have some issue yet to be understood.
Attached is screen print showing browser output
and file compare of browser output vs this file.
*/
{
"children":[
{
"user":"1",
"task":"About Us",
"duration":"123",
"cls":"folder",
"leaf":false,
"expanded":true,
"children":[
{
"user":"1",
"task":"post one",
"duration":"123",
"cls":"file",
"leaf":true
}
]
},
{
"user":"3",
"task":"Membership",
"duration":"123",
"cls":"folder",
"leaf":false,
"expanded":true,
"children":[
{
"user":"3",
"task":"delete me",
"duration":"123",
"cls":"file",
"leaf":true
},
{
"user":"2",
"task":"referal",
"duration":"123",
"cls":"file",
"leaf":true
}
]
}
]
}
33826