access to components created via viewport+json

[caponet]

Hello,

I've just created a webpage, and all the components are created on a viewport:


Ext.onReady(function() {
var viewport = new Ext.Viewport(
{
layout : "border",
items : [ {
region : "center",
title : "Incidencies",
layout : "fit",
items : [ {
layout : "border",
items : [ {
region : "center",
title : "Dades de la Reclamacio"
}, {
region : "south",
title : "Resultats",
items : [ {
xtype : "grid",
border : false,
viewConfig : {
forceFit : true
},
ds : ds2,
cm : cm2
}],
height : 250
},
...
ds2 and cm2 are created previoulsy:



var cm_ttransporte = new Ext.grid.ColumnModel([

{header: "Targeta", width: 100, dataIndex: 'id'},
{header: "Nom", width: 120, dataIndex: 'nom'},
{header: "Llinatges", width: 180, dataIndex: 'llinatges'}
]);
cm_ttransporte.defaultSortable = true;

...

var ds2 = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'CercaUsuari.xml'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'id', mapping: 'usuari > id'},
{name: 'nom', mapping: 'usuari > nom'},
{name: 'llinatges', mapping: 'usuari > llinatges'}
])
});



I suppose that the xml data is not rendered into the grid because I haven't put something like

grid.render();

because I don't know how to reference my grid, as is not declared as a variable, I don't know how to access it (e.g: there's not a variable holding my grid).

So, how can I reference the components created via viewport+json?

Thanks in advance

[shibubh]

I suppose that the xml data is not rendered into the grid because I haven't put something like

grid.render();



YOur xml data is not displayed in gird because you forget to load the store;

ds2.load();

and


So, how can I reference the components created via viewport+json?



give Grid a ID and access via Ext.getCmp("GRIDID');



xtype : "grid",
border : false,
id:'GRIDID'

[caponet]

Thanks Sibbubh,

I've just test what you said, but is still not working. I cleaned up my code, just to make it as similar as possible as the examples shown in the extjs tutorials, but smthing is not right. Here's my code:


Ext.onReady(function() {


var cm_ttransporte = new Ext.grid.ColumnModel([
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
]);


var ds_ttransporte = new Ext.data.Store({
url: 'sheldon.xml',
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
])
});

ds_ttransporte.load();

var viewport = new Ext.Viewport(
{
layout : "border",
items : [
{
region : "center",
title : "Usuaris",
collapsible : true,
width : "100%",
layout : "fit",
items : [
{
layout : "border",
items :
[
{
region : "center",
title : "Resultats",
height : 250,
items:
[
{
xtype : "grid",
id:"grid_restt",
border : false,
viewConfig :
{
forceFit : true
},
ds : ds_ttransporte,
cm : cm_ttransporte
}
]
},
]
}
]
}
]
}
);
ext.getcmp("grid_restt").render();
}

);

Any ideas?

Thanks a lot

[shibubh]

try this



Ext.onReady(function() {
var cm_ttransporte = new Ext.grid.ColumnModel([{
header: "Author",
width: 120,
dataIndex: 'Author',
sortable: true
},
{
header: "Title",
width: 180,
dataIndex: 'Title',
sortable: true
},
{
header: "Manufacturer",
width: 115,
dataIndex: 'Manufacturer',
sortable: true
},
{
header: "Product Group",
width: 100,
dataIndex: 'ProductGroup',
sortable: true
}]);
var ds_ttransporte = new Ext.data.Store({
url: 'sheldon.xml',
reader: new Ext.data.XmlReader({ // records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
},
[ // set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{
name: 'Author',
mapping: 'ItemAttributes > Author'
},
'Title', 'Manufacturer', 'ProductGroup'])
});
ds_ttransporte.load();
var viewport = new Ext.Viewport({
layout: "border",
items: [{
region: "center",
title: "Usuaris",
collapsible: true,
layout: "border",
items: [{
region: "center",
title: "Resultats",
xtype: "grid",
id: "grid_restt",
border: false,
viewConfig: {
forceFit: true
},
ds: ds_ttransporte,
cm: cm_ttransporte
}]
}]
});
});

[caponet]

Thanks Shibubh,

It's working now, although the problem also was that I was trying to view the page outside of the server (locally in a windows folder), and the xml couldn't be loaded. After making the changes you adviced me, and wrapping it all in a war file and the uploaded it to tomcat, it's working like a charm.

Thanks again