PDA

View Full Version : not able to display tree grid with hard coded values using plain html page



sbodanapu
18 Jan 2013, 4:34 AM
Hi,
I am a beginner in Ext JS and i am asked to perform one simple task of displaying a tree grid using plain HTML page of which i am using hard coded values for data. But, i am not able to display this.
Please find my code below and suggest me if i am doing anything wrong.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="/Users/renjithcs/Desktop/ext-4.1.1a/resources/css/ext-all.css">
<script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-base.js"></script>
<script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-all.js"></script>
<script type="text/javascript" src="/Users/Desktop/treegrid.js"></script>

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


treegrid.js

Ext.Loader.setConfig({
enabled: true
});Ext.Loader.setPath('Ext.ux', '../ux');

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

Ext.onReady(function() {
Ext.QuickTips.init();

//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'UniverseDetails', type: 'string'},
{name: 'description', type: 'string'}
],
idProperty: 'UniverseDetails'
});
var myData = [
['Apple','Founded by Steve Jobs'],
['Microsoft','The Dream company for every job seeker']
];


var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
data: myData,
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Universe Details',
flex: 2,
sortable: true,
dataIndex: 'UniverseDetails'
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Description',
flex: 1,
sortable: true,
dataIndex: 'description',
align: 'center',
tpl: Ext.create('Ext.XTemplate')
}]
});
});

Please help me as soon as possible.
Thanks in Advance.

Sandeep

sword-it
18 Jan 2013, 7:58 AM
Hi!

This is working fine for me, you may check it



Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'book', type: 'string'},
{name: 'pages', type: 'string'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Book',
data: YOUR DATA,
folderSort: true
});






Ext.create('Ext.tree.Panel', {title: 'Books',
width: 500, height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
columns: [
{
xtype: 'treecolumn',
text: 'Name',
flex: 2,
sortable: true,
dataIndex: 'book'
},
{
text: 'Pages',
flex: 1,
dataIndex: 'pages',
sortable: true
}
]
});

skirtle
20 Jan 2013, 6:42 AM
<script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-base.js"></script>
<script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-all.js"></script>

ext-base.js doesn't exist in ExtJS 4. Remove that line and change ext-all.js to ext-all-dev.js. The paths also look suspicious to me, looks like you're doing some seriously dodgy things with accessing files off the file-system.

Open up a debugger and view the network traffic, make sure all the files are loading correctly.

sbodanapu
20 Jan 2013, 11:30 PM
Hi!

This is working fine for me, you may check it



Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'book', type: 'string'},
{name: 'pages', type: 'string'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Book',
data: YOUR DATA,
folderSort: true
});






Ext.create('Ext.tree.Panel', {title: 'Books',
width: 500, height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
columns: [
{
xtype: 'treecolumn',
text: 'Name',
flex: 2,
sortable: true,
dataIndex: 'book'
},
{
text: 'Pages',
flex: 1,
dataIndex: 'pages',
sortable: true
}
]
});



HI sword..thanks for your informative reply..But, it is still not working with me..It is showing me the error "You are using a servor Proxy but have not supplied it with a URL". Can you please tell me where i am doing wrong

Thanks,
Sandeep.

sword-it
20 Jan 2013, 11:48 PM
Hi!

You need to give an proxy to your store.
When the model was registered, you did not supply a proxy configuration on the model. As a result, the model manager assigned a default proxy (which is has a default proxy type of 'ajax').

sample for setting proxy:-



var Store = new Ext.data.Store({
model: 'User',
storeId: 'userStore',
remoteSort: false,
autoLoad: false,
proxy: {
type: 'localstorage',
id: 'sampleId',
}
});





check this:-
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-cfg-proxy

sbodanapu
21 Jan 2013, 1:19 AM
Hi!

You need to give an proxy to your store.
When the model was registered, you did not supply a proxy configuration on the model. As a result, the model manager assigned a default proxy (which is has a default proxy type of 'ajax').

sample for setting proxy:-



var Store = new Ext.data.Store({
model: 'User',
storeId: 'userStore',
remoteSort: false,
autoLoad: false,
proxy: {
type: 'localstorage',
id: 'sampleId',
}
});





check this:-
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-cfg-proxy

Hi sword,
Can you please correct me here if i am doing any thing wrong with the following code

Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'book', type: 'string'},
{name: 'pages', type: 'string'}
],
proxy: {
type: 'localstorage',
id: 'sampleId',
}
});


var myData = [
['Apple','500'],
['Microsoft','600']
];

var store = Ext.create('Ext.data.TreeStore', {
model: 'Book',
storeId:'UserStore',
remoteSort:false,
autoLoad:false,
data: myData,
folderSort: true
});

sword-it
21 Jan 2013, 1:35 AM
HI!

i guess, you need to give proxy to your store not to your model.




var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
data: myData,
folderSort: true,
proxy:{.....}
});



Also, check the link in my above post for better understanding. i.e.
http://docs.sencha.com/ext-js/4-1/#!...tore-cfg-proxy (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-cfg-proxy)

sbodanapu
21 Jan 2013, 4:28 AM
HI!

i guess, you need to give proxy to your store not to your model.




var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
data: myData,
folderSort: true,
proxy:{.....}
});



Also, check the link in my above post for better understanding. i.e.
http://docs.sencha.com/ext-js/4-1/#!...tore-cfg-proxy (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.AbstractStore-cfg-proxy)

Sword, thanks for your replies and hearing to me patiently.
Now everything is almost done except the data not being displayed.I doubt whether the json format i am using is correct. Please have a look at this

var store = Ext.create('Ext.data.TreeStore', {
model: 'Book',
storeId:'UserStore',
remoteSort:false,
autoLoad:false,
data: treeGridData,
proxy: {
type: 'localstorage',
id: 'sampleId',
},
reader: {
type: 'json'
},
folderSort: true
});



json data :

var treeGridData=[
{
"object": "fruit",
"name": "fruit",
"quantity": "100 kg ",
expanded : true,
"children": [
{
"object": "apple",
"name": "apple",
"quantity": "50 kg ",
"leaf": true
},
{
"object": "mango",
"name": "mango",
"quantity": "100 kg ",
"leaf": true
}
]
}
];

Thanks,
Sandeep

sword-it
21 Jan 2013, 5:27 AM
HI!

it was a sample how to use proxy according to your needs and i guess you haven't either check my link, and do a copy paste.

However, in your case, following will work

check out this implementation:-



// model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});






var data = {
details: [
{
id: 1,
name: 'name1'
},
{
id: 2,
name: 'name2'
}
]
};






var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'details'
}
}
});

sbodanapu
22 Jan 2013, 2:31 AM
Hi sword, I am finding it seriously difficult to find the error in my code.though i am not able to find one.Please go through this code and help me where i am going wrong..



Ext.onReady(function() {
Ext.create('Ext.tree.Panel', {title: 'Books',
width: 500, height: 300,

collapsible: true,
useArrows: true,
rootVisible: true,
store: store,
multiSelect: true,
singleExpand: true,
columns: [
{
xtype: 'treecolumn',
text: 'Object',
flex: 2,
sortable: true,
dataIndex: 'object'
},
{
text: 'Name',
flex: 1,
dataIndex: 'name',
sortable: true
} ,
{
text: 'Quantity',
flex: 1,
dataIndex: 'quantity',
sortable: true
}
],
renderTo: Ext.getBody()

});
});

var store=Ext.create('Ext.data.TreeStore', {
storeId:'simpsonsStore',
id:'storeName',
autoLoad:true,
fields:[{'type':'int','name':'id','mapping':'id'},{'name':'object','mapping':'object'}, 'name':'name','mapping':'name', 'name':'quantity','mapping':'quantity'],idProperty: 'id',
data:{'record':[
{ 'id':1,'object':'fruit','name': 'apple','quantity':'40','leaf':true,'parentId':1,'iconCls':'task-folder'},
{ 'id':2,'object':'PC','name': 'HP','quantity':'2',iconCls:'task-folder','expanded':true ,
children: [
{
'id':21,
'object': "sand",
'name': "apple",
'quantity': "50 kg ",
'leaf': true,
'parentId':2
},
{
'id':22,
'object': "mud",
'name': "mango",
'quantity': "100 kg ",
'leaf': true,
'parentId':2
}
]
},
{'id':3, 'object':'pen','name': 'cello','quantity':'30'},
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'record'
}
}
});