PDA

View Full Version : what is Difference Ext.reg and directly assign items in to container?



sam.arulprakash
29 Jun 2010, 12:10 AM
Hi all,

what is Difference Ext.reg and directly assign items in to container?

in my sample
if i have registered using Ext.reg and use the component working fine,otherwise
directly assign the items in to viewport not working as expected.(Alignment of that component not good.)

Please post your suggestions.


<script language="javascript" type="text/javascript">
var grid_ds;
var grid;
Ext.onReady(function(){
Ext.ns('Experiment');
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.QuickTips.init();
grid_ds = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy
({
url: "Test.asmx/GetShips",
method: "POST",
disableCaching: true
}),
reader: new Ext.data.XmlReader
({
record: 'Rows',
id: 'SHPFLAG',
totalRecords: 'totalRecords'
},['SHPFLAG','SHPNAME']),
autoLoad: true
});

Experiment.Grid = Ext.extend(Ext.grid.GridPanel,
{
initComponent:function()
{
var config =
{
store: grid_ds,
colModel: new Ext.grid.ColumnModel
({
columns:[
{id :'SHPFLAG',header:'SHPFLAG',
sortable: true, dataIndex: 'SHPFLAG'},
{header: 'SHPNAME',dataIndex: 'SHPNAME'}
]
}),

sm: new Ext.grid.RowSelectionModel({singleSelect:true}),

title: 'ShipsDeatail',
iconCls: 'icon-grid',

bbar: new Ext.PagingToolbar
({
xtype: 'paging',
pageSize: 3,
store: grid_ds,
displayInfo: true,
emptyMsg: "No data to display"
})
} //eo config ,
Ext.apply(this, Ext.apply(this.initialConfig, config));
Experiment.Grid.superclass.initComponent.apply(this, arguments);
}//eo initial

});
//Ext.reg('ExperimentGrid', Experiment.Grid);
var test=new Experiment.Grid({});

var viewport = new Ext.Viewport
({
layout:'fit',
items:[
{
layout:'border',
region:'center',
header:false,
border:false,
items:[{
region:'south',
title:'south',
border:true,
height:100,
collapsible:true,
split:true
},{
region:'center',
title:'center',
border:true,
items:test,//This Code Not working as expected
//xtype:'ExperimentGrid', //This Code Working fine
height:100,
collapsible:true,
split:true
},{
region:'north',
title:'south',
border:true,
height:100,
collapsible:true,
split:true
}
]
}
]
});


});

</script>

Thanks in advance.

Regards,
Arul Prakash.M

Condor
29 Jun 2010, 12:46 AM
These examples are not the same. Using an xtype the center region IS the grid, using the 'test' variable the center region contains the grid.

You want:

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'south',
title: 'south',
border: true,
height: 100,
collapsible: true,
split: true
}, Ext.apply(test, {
region: 'center',
title: 'center',
border: true
}), {
region: 'north',
title: 'north',
border: true,
height: 100,
collapsible: true,
split: true
}]
});
(I also removed the extra border layout panel because it wasn't needed)

sam.arulprakash
29 Jun 2010, 12:57 AM
Thanks a lot man.

You are fix working fine for me.

Thanks and Regards,
Arul prakash.M