Nuclear Instruments and Methods in Physics Research Section B ::
Panel (A) shows force and clamp distance over time. In the graph the peak intensity of the Gaussian fit is plotted versus time during a stretch–release
http://linkinghub.elsevier.com/retrieve/pii/S0168583X05021695HOME |
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]
});
CSS Creator Expand Floating Div which is inside container div::
31 posts - Last post: Oct 30, 2008is there any way I can get the container to expand depending on the . Well you'll never design a reasonably complex page without using a
http://csscreator.com/node/32348HOME |
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']
];
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.
can anyone please help me??
I have the same issue and I'm also new to ExtJS, and I didn't understood the previous answer.
Can anyone 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!
Let me know when you have any updates on this
@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.
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);
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.
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???
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.
 Nortel Unveils Vision, Strategy for Israeli High-Performance Net
 Busy Friday Leads to Strong Close for Net Stocks |
HOME
PRINT
Add to favorites