What is wrong in the code ? [Archive]

gameboy87

30 May 2013, 3:45 AM

In a border layout, i am rendering a tree to west and grid panel to center.

The tree-data.json file has,

{
text: '.',
children: [{
text:'Sendfile Config',
expanded: true,
children:[{
text:'Create Link',
id:'g-panel',
leaf:true
}]
}]
}
~

Ext.onReady(function(){

function gettreestore()
{
var store = Ext.create('Ext.data.TreeStore',{
root:{
expanded:true
},
proxy:{
type:'ajax',
url:'tree-data.json'
}
});

}

function getgridstore()
{
var store = Ext.create('Ext.data.Store',{
autoLoad:true,
fields:[
{ name:'id', type:'integer' },
{ name:'name', type:'string' }
],
data:[
{ 'id':1, 'name':'hello' }
]
});

return store;
}

function getgridpanel()
{
var grid;
grid = {
id:'g-panel',
title:'Sendfile Config',
xtype:'gridpanel',
layout:'fit',
store: getgridstore(),
columns:[
{ text:'ID', dataIndex:'id' },
{ text:'Name', dataIndex:'name' }
]
};//grid condig

return grid;//return config
}

var citems = [];

citems.push(getgridpanel());

contentPanel = Ext.create('Ext.panel.Panel',{
id:'content-panel',
region:'center',
layout:'card',
margin:'2 5 5 0',
//activeItem:0,
border:false,
items:citems
});

var treeconfig = Ext.create('Ext.tree.Panel',{
id:'tree-panel',
title:'Choose Option',
region:'west',
split:'true',
height:360,
minSize:150,
rootVisible:false,
autoScroll:true,
store: gettreestore()
});

Ext.create('Ext.container.Viewport',{
layout:'border',
items:[
treeconfig,
contentPanel
]
});

});

friend

30 May 2013, 4:24 AM

The first problem I see is that gettreestore() isn't returning anything. It creates a private var named 'store', but never returns it...

I recommend starting with the smallest/simplest block of working code, then build up from there. As an example, here's a minimal, functional layout that works. Start with this and add one component at a time, verifying that each new component works before moving on to the next:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-theme-gray/ext-theme-gray-all.css">
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.container.Viewport', {
layout:'border',
items:[{
xtype: 'treepanel',
region: 'west',
title: 'Simple Tree',
width: 200,
//store: store,
rootVisible: false
},{
xtype: 'panel',
region: 'center',
layout: 'card',
title: 'Card Layout Center Panel',
items: [{
xtype: 'panel',
title: 'Card 1'
}]
}]
});
});
</script>

</head>
<body>
</body>
</html>

In the example above, I'd first focus on getting the tree store functional, then swap out the 'Card 1' panel with your grid.

gameboy87

30 May 2013, 4:28 AM

Thanks. That's a mistake. The actual mistake is that we must specify the width for tree-panel.