Hello Ext-Community,
i am new to Ext and play around with 2.0 and now got a problem...
sry for my english, maybe there are some mistakes, but i hope u can follow me.
here is my problem:
i've got a viewport with north, center and south. so far so good.
now i want to load a gridPanel from another site into my center-panel.
the problem is, it will not fit the hole contentPanel.
when i load that grid directly (not from another site) it works fine,
but i've got a lot of different grids i wanna show there and i want it in seperate files.
any idea how i can solve the problem?
here is my code for the viewport:
Ext.onReady(function() {
// NORTH:
var northPanel = new Ext.Panel({
region : 'north',
title : 'TestArea'
//cls : 'x-layout-header'
});
// CENTER:
var tb = new Ext.Toolbar();
var contentPanel = new Ext.Panel({
layout : 'fit',
// frame : true,
tbar : tb,
region : 'center'
});
// SOUTH:
var southPanel = new Ext.Panel({
region : 'south',
height : 30,
html : 'some Text here'
});
// Viewport:
var viewport = new Ext.Viewport({
layout:'border',
items:[northPanel,contentPanel,southPanel]
});
tb.addSeparator();
var update = contentPanel.getUpdater();
update.loadScripts = true;
update.update({
url: "http://localhost/grid.htm"
});
});
and here is my code for the grid (standard-grid from the tutorials...just to show)
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
Presentation to the Panel on Transport Legislative Council Deep ::
File Format: PDF/Adobe Acrobat - View as HTMLexample, Singapore, which has half the population of Hong Kong, saw fit to . ò It will force the Tuen Mun residents to do a circuitous route to CLK Ap.
http://www.legco.gov.hk/yr01-02/english/panels/tp/papers/tp1217-618-1e-scan.pdfHOME |
];
var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var tb = new Ext.Toolbar({
height : 25
});
var grid = new Ext.grid.GridPanel({
// layout : 'absolute',
// anchor : '100% 100%',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
bbar : tb,
columns: [
{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
renderTo: 'myDiv',
title: 'TestGrid'
//fitToFrame : true
});
when i put this code instead of the contentPanel in the viewport, everything works fine, but in case to load it from another site the grid height dont fit to the page...
i tried a lot of different things now, but i can't find a solution.
Wherever you need cranes. Let’s Talk.::
File Format: PDF/Adobe Acrobat - View as HTMLof tasks, the right fit for luffing or mobile cranes. Electrical spreaders: processors for force measurement right up to load cells
http://www.siemens.com.br/templates/get_download2.aspx?id=3342&type=FILESHOME |
can anyone please help me??
Let me know when you have any updates on this
yes, if i define my grids in one file it works,
but my problem is, i want to define my other grids in a separate file, cause
when i define them in one file, it will be too much lines of code.
i want to unitize it for a clean overview.
puh, take long time, but finaly i got it.
here it is:
main.js:
test = function(){
return {
init: function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
//-------------------------
var contentPanel = new Ext.Panel({ id : 'contentpanel', layout:'fit',renderTo:'content'});
//-------------------------
// NORTH:
var button = new Ext.Toolbar.Button({
type: 'button',
text: 'show'
});
button.on('click', function(){
Ext.getCmp('centerpanel').getLayout().setActiveIte m('0');
Ext.getCmp('centerpanel').doLayout();
});
var tb = new Ext.Toolbar();
var northPanel = new Ext.Panel({
region : 'north',
bbar : tb,
title : 'TestArea'
//cls : 'x-layout-header'
});
// CENTER:
var centerPanel = new Ext.Panel({
layout : 'card',
activeItem:0,
id : 'centerpanel',
// frame : true,
region : 'center'
// ,items : [contentPanel]
});
// SOUTH:
var southPanel = new Ext.Panel({
region : 'south',
height : 30,
html : 'testtext'
});
// Viewport:
var viewport = new Ext.Viewport({
layout:'border',
id : 'viewport',
items:[northPanel,centerPanel,southPanel]
});
tb.addSeparator();
tb.add(button);
var update = contentPanel.getUpdater();
update.loadScripts = true;
update.on('update', onGridLoad, this);
update.update({ url: "http://localhost/grid.htm" });
}
};
}();
Ext.EventManager.onDocumentReady(test.init, test, true);
and here the code for the loaded grid:
test.grid = function(){
return {
init: function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var tb = new Ext.Toolbar({
id : 'toolbar',
height : 25
});
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
bbar : tb,
columns: [
{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
title: 'TestGrid'
});
var button = new Ext.Toolbar.Button({
type: 'testButton',
text: 'show'
});
this.tab = Ext.getCmp('centerpanel');
this.tab.add(grid);
this.tab.getLayout().setActiveItem(0);
grid.doLayout();
this.tab.doLayout();
var vp = Ext.getCmp('viewport');
vp.doLayout();
grid.getSelectionModel().selectFirstRow();
grid.doLayout();
tb.addSeparator();
tb.add(button);
//-----------------------------------------------------
}
}
}();
Ext.EventManager.onDocumentReady(test.grid.init, test.grid, true);
question:
before i can call the updater,
(
var update = testPanel.getUpdater();
update.loadScripts = true;
update.update({
url: "http://localhost/grid.htm"
});
)
i must render the panel in which i wanna load
my grid from the other file. correct? i can't load my file if i don't have
a rendered panel to load it in...and i cant add a component to my container
which is not rendered....
and the grid from my loaded file renders when i load it. why isnt there a property
like autoFit / fitToFrame = true or sth like this????
any help???
http://localhost/grid.htm
So you load that into the center Panel. That renders the Grid, it does not add it to the center Panel. The center Panel cannot possibly know anything about this operation. How could it?
How many times?
add Components to Containers, do not render!
@Animal: first, thx a lot for your fast answer, but...
i tried to add a component, but its always the same.
the grid from my other file that i load with the updater wont fit to the centerpanel.
maybe you can give me a small example?
i just need an impulse to go on...
thanks a lot.
I probably wouldn't use an updater to do this. I'd define the grid or grids and lazy load them
e.g.
if(!grid1){
grid1 = new Ext.grid.GridPanel...
}
add them to the centerPanel, hide or show as necessary...if you want to show just one grid at a time, you could use either a tabPanel or use the card layout. The container for the gridPanel would use the layout:'fit'...that will make the gridpanel the width of its container.
I have the same issue and I'm also new to ExtJS, and I didn't understood the previous answer.
Can anyone help ?
 Where's The Advantage In Windows Genuine Advantage?
 Stocks Bounce After S&P Joins Bear Market
|
HOME