PDA

View Full Version : EXT.Window, tool button are not visible



MarcHetu
19 Apr 2010, 10:34 AM
I want to pup-up a window on a cellclick event on the grid. The window pup-up but the tool buttons are not visible. I think this is cause by the parent's CSS but not sure ! can somebody help please !


var win = new Ext.Window({id:"winPanel",
baseCls:'x-plain',
preventBodyReset:true,
minimizable: true,
maximizable: true,
modal:true,
title: 'First window!',
width: 300,
height:250
});

//Setup of the Grid
var myGrid = new Ext.grid.GridPanel({title:'Mannequins:',
store: store,
columnLines : true,
colModel: createColModel(),
loadMask: true,
height:140,
trackMouseOver:true,
disableSelection:false,
stripeRows: true,
collapsible:true,
listeners: {cellclick: function(grid, rowIndex, columnIndex, e)
{var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(0);
var IDmann = record.get(fieldName);
var TCvehicule = TCvehi;
win.show();
}},});

jtpacheco
19 Apr 2010, 10:38 AM
Ok, you got lucky this time because the code wasn't too crazy, but for future reference, please put all code withing CODE tags.

Now, first of all, what do you mean by "tool buttons"...are you referring to the standard Minimize, Maximize/Restore, and Close buttons that appear in the top-right corner of the window? Try taking the baseCls config option off, see what that does for you.

MarcHetu
19 Apr 2010, 11:31 AM
Thanks for your reply !
Yes I am referring to the standard Minimize, Maximize/Restore, and Close buttons that appear in the top-right corner of the window. The problem is that when I run the javascript from the cold fusion server to pup-up a window, the tool buttons are not visible. I think this is because Ext.Window inherit css style from his parent. I would like to know how to change that !

script simplified withing CODE tags...sorry :"> new at all this :)


Ext.onReady(function() {

var win = new Ext.Window({id:"winPanel",
title: 'First window!',
width: 300,
height:250,
minimizable: true, //show the minimize button
maximizable: true, //show the maximize button
});

//display the window in the screen
win.show();
});

jtpacheco
19 Apr 2010, 11:46 AM
Do those changes fix anything? If not, check the api docs http://www.extjs.com/deploy/dev/docs/?class=Ext.Window

MarcHetu
19 Apr 2010, 11:59 AM
Nothing is fix except that I was able to change the background color in my .css stylesheet adding this line: #winPanel{ background: #B3D9FF; padding: 10px; border: #1B3045 1px solid; }

jtpacheco
19 Apr 2010, 12:10 PM
Oh! Try adding this line:

header : true

somewhere in your window creation code. That may be it.

MarcHetu
19 Apr 2010, 12:34 PM
I try this without success:


Ext.onReady(function() {

var win = new Ext.Window({id:"winPanel",
title: 'First window!',
header: true,
width: 300,
height:250,
minimizable: true, //show the minimize button
maximizable: true, //show the maximize button
resizable:true,
});

//display the window in the screen
win.show();
});

jtpacheco
19 Apr 2010, 12:47 PM
Hmm...well using minimizable, maximizable, and closable, I've gotten all 3 buttons to show on a test window of mine...
var win = new Ext.Window({
title : "Test",
height : 400,
closable : true,
items : [this.gridPanel1],
minimizable : true,
width : 300,
xtype : "window",
header : true,
maximizable : true
});I threw the xtype in there for fun, but I don't think it matters

MarcHetu
20 Apr 2010, 6:07 AM
I solved this problem loading 'ext-all.css' directly in my script using document.write. B)
The css over winPanel was incomplete.

document.write('<link rel="stylesheet" type="text/css" href="grid/ext-3.1.0/resources/css/ext-all.css">');


Ext.onReady(function() {

var win = new Ext.Window({id:"winPanel",
title: 'First window!',
header: true,
width: 300,
height:250,
minimizable: true, //show the minimize button
maximizable: true, //show the maximize button
resizable:true,
});

//display the window in the screen
win.show();
});

jtpacheco
20 Apr 2010, 6:08 AM
There you go! Completely forgot about that, that was in a separate file for me.

MarcHetu
20 Apr 2010, 6:15 AM
Thanks for your help jtpacheco...hopefully this post will help others not loosing precious time :D

20 Apr 2010, 8:34 AM
I solved this problem loading 'ext-all.css' directly in my script using document.write. B)
The css over winPanel was incomplete.

document.write('<link rel="stylesheet" type="text/css" href="grid/ext-3.1.0/resources/css/ext-all.css">');

Ext.onReady(function() {

var win = new Ext.Window({id:"winPanel",
title: 'First window!',
header: true,
width: 300,
height:250,
minimizable: true, //show the minimize button
maximizable: true, //show the maximize button
resizable:true,
});

//display the window in the screen
win.show();
});


Why do you continue to post code without code tags?!

MarcHetu
20 Apr 2010, 9:15 AM
Because I didn't know how to put code tags around my code ...is that bettet?

I solved this problem loading 'ext-all.css' directly in my script using document.write.
The css over winPanel was incomplete.


document.write('<link rel="stylesheet" type="text/css" href="grid/ext-3.1.0/resources/css/ext-all.css">');

Ext.onReady(function() {

var win = new Ext.Window({id:"winPanel",
title: 'First window!',
header: true,
width: 300,
height:250,
minimizable: true, //show the minimize button
maximizable: true, //show the maximize button
resizable:true,
});

//display the window in the screen
win.show();
});

fay
20 Apr 2010, 9:27 AM
resizable:true, // <-- Remove the trailing comma, it will cause problems in IE
});

MarcHetu
20 Apr 2010, 9:35 AM
Thanks...good observation ;)