PDA

View Full Version : formPanel inside a button in extjs 3.4



Gery
23 Jul 2012, 3:52 AM
Hello,

I'm trying to display/collapse a formPanel after pressing a button located in a tbar as it is in this ext js 4 script: http://jsfiddle.net/ErnestoRR/bYMP5/. This is basically what I need but I need it in ext js 3.4. Here I send you what I have:



<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-gray.css"></link>
<link rel="stylesheet" type="text/css" href="ext/examples/shared/examples.css"></link>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">

Ext.onReady(function() {

// Print
var formPanel = new Ext.form.FormPanel(
{
id: "myformpanel",
// collapsed: true,
width: 200,
bodyStyle: "padding:5px",
labelAlign: "top",
defaults:
{
anchor: "100%"
},
items:
[
{
xtype: "textarea",
name: "comment",
value: "",
fieldLabel: "Comment"
},
{
xtype: "combo",
displayField: "name",
fieldLabel: "Layout",
typeAhead: true,
mode: "local",
triggerAction: "all"
},
{
xtype: "combo",
displayField: "name",
fieldLabel: "Resolution",
tpl: '<tpl for="."><div class="x-combo-list-item">{name} dpi</div></tpl>',
typeAhead: true,
mode: "local",
triggerAction: "all",

// the plugin will work even if we modify a combo value
setValue: function(v)
{
v = parseInt(v) + " dpi";
Ext.form.ComboBox.prototype.setValue.apply(this, arguments);
}
},
{
xtype: "combo",
displayField: "name",
fieldLabel: "Scale",
typeAhead: true,
mode: "local",
triggerAction: "all",
},
{
xtype: "textfield",
name: "rotation",
fieldLabel: "Rotation"
}
],
buttons:
[
{
text: "Create PDF",
handler: function()
{
// convenient way to fit the print page to the visible map area
printPage.fit(true)
}
}
]
}
);

/*
var displayPanel = new Ext.Panel({
id: "myformpanel",
width : 300,
height : 500,
layout: 'fit',
items : [formPanel]
});
*/

var action = new Ext.Action({
text: 'toggle print panel',
handler: function(){
var winPanel = Ext.getCmp("myformpanel");
if(!winPanel)
function showWindow()
{
winPanel.show();
}

function hideWindow()
{
Ext.getCmp("myformpanel").hide();
}
}
});

var mapPanelTbar = new Ext.Toolbar({
height: 30,
items: [
new Ext.Button(action)
]
});

var mapPanel = {
region: 'center',
html: 'map panel content',
tbar: mapPanelTbar
};

var viewport = new Ext.Viewport({
layout: 'border', // main viewport
items: [
mapPanel // center part of the main region
]
});

});
</script>

</body>
</html>


I think I needed to put the ext.form.Panel inside a ext.Panel and then trigger this panel after pressing the ex.action button. However, I understand that the formPanel is actually a panel, so I wouldn't need to create a nex ext.panel (that's why it's commented in the code). I have problems to display this formPanel through the handler, which I think it's the one that creates such open/close effects.

I'm still confused about this, I really hope someone could point me to the right direction. I'd appreciate your support on this, thanks in advance.

dracofyre
23 Jul 2012, 8:30 AM
Gery,
This is probably not the exact answer you want, but the ExtJS3.4 examples that come with the product contain a button example that has a panel within a button.

See http://dev.sencha.com/deploy/ext-3.4.0/examples/menu/menus.html

T (http://dev.sencha.com/deploy/ext-3.4.0/examples/menu/menus.html)ake a look at the users button. When clicked on it displays a panel with components on it. I would start with dissecting that to get a better understanding of what you need to do.

Dracofyre

Gery
23 Jul 2012, 9:08 AM
thanks Dracofyre for the link, I checked this example and tried to replicate it but nothing, I got stuck. From my code, I'm pretty sure the handler is wrong, but no idea how to fix that. The link of the ext 4 code tells me that I need a tbar and a panel (I undertand the dockeditems replaces that), but how to join that in ext js is what confused me. Thanks.

scottmartin
23 Jul 2012, 11:10 AM
See if this will help:



Ext.onReady(function() {

PanelMain = Ext.extend(Ext.Panel, {
height: 300,
width: 500,
title: 'My Panel',

initComponent: function() {
Ext.applyIf(this, {

tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Impresora',
menu: {
xtype: 'menu',
items: [{
xtype: 'container',
items: [{
xtype: 'form',
bodyPadding: 5,
items: [{
xtype: 'textfield',
fieldLabel: 'Titulo'
}, {
xtype: 'textfield',
fieldLabel: 'Comentario'
}, {
xtype: 'combo',
fieldLabel: 'Resolucion'

}, {
xtype: 'button',
text: 'boton'
}]
}]
}]
}
}]
}


});

PanelMain.superclass.initComponent.call(this);
}

});

Ext.reg( 'panelmain', PanelMain ); // register xtype

var panel = new PanelMain({
renderTo: Ext.getBody()
});

});


Scott.

Gery
23 Jul 2012, 12:10 PM
thank you very much Scott, it worked perfectly, even though I don't understand well how it works internally, you really replicated perfectly the code in extjs 4. One extra question, I need to adapt this cool piece of code to the one I posted before, is that possible? if so, how could I use my tbar instead of the tbar in your code? thank you again.

dracofyre
23 Jul 2012, 12:14 PM
var mapPanelTbar = new Ext.Toolbar({
height: 30,
items: [
{
xtype: 'button',
text: 'Impresora',
menu: {
xtype: 'menu',
items: [{
xtype: 'container',
items: [{
xtype: 'form',
bodyPadding: 5,
items: [{
xtype: "textarea",
name: "comment",
value: "",
fieldLabel: "Comment"
},
{xtype: "combo",
displayField: "name",
fieldLabel: "Layout",
typeAhead: true,
mode: "local",
triggerAction: "all"},
{
xtype: "combo",
displayField: "name",
fieldLabel: "Resolution",
tpl: '<tpl for="."><div class="x-combo-list-item">{name} dpi</div></tpl>',
typeAhead: true,
mode: "local",
triggerAction: "all",// the plugin will work even if we modify a combo value
setValue: function(v){
v = parseInt(v) + " dpi";
Ext.form.ComboBox.prototype.setValue.apply(this, arguments);
}
},
{xtype: "combo",
displayField: "name",
fieldLabel: "Scale",
typeAhead: true,
mode: "local",
triggerAction: "all",
},
{xtype: "textfield",
name: "rotation",
fieldLabel: "Rotation"
}],
buttons:[{text: "Create PDF",
handler: function(){
// convenient way to fit the print page to the visible map area
printPage.fit(true)
}}]}]
}]
}
}]
});



Try that. Not tested but you should be able to pass the configuration to the toolbar constructor.

scottmartin
23 Jul 2012, 12:16 PM
The items under the menu ... 'combo/combobox' are supported xtypes in Ext4, where only 'combo' is supported in Ext3

Scott.

Gery
23 Jul 2012, 1:37 PM
very cool Dracofyre and Scott, thanks very much, it worked nicely. Another question, is it possible to adapt this "items" structure to the Ext.Action I have in my first code? I was trying recently but it didnt work as with the Ext.Toolbar in the last code. I was thinking to use only:



var mapPanelTbar = new Ext.Toolbar({
height: 30,
items: [
new Ext.Button(action)
]
});


and put the "items" or better the Ext.form.FormPanel there, that makes sense?

Thanks for your nice support.

dracofyre
24 Jul 2012, 7:52 AM
I normally don't use actions but I think something like this could work. I haven't tested it but you can take the config information and pass it into your action which then you can pass into the button creation of the toolbar. In theory that should work.



var actionConfig = {
text: 'Impresora',
menu: {
xtype: 'menu',
items: [{
xtype: 'container',
items: [{
xtype: 'form',
bodyPadding: 5,
items: [{
xtype: "textarea",
name: "comment",
value: "",
fieldLabel: "Comment"
},
{xtype: "combo",
displayField: "name",
fieldLabel: "Layout",
typeAhead: true,
mode: "local",
triggerAction: "all"},
{
xtype: "combo",
displayField: "name",
fieldLabel: "Resolution",
tpl: '<tpl for="."><div class="x-combo-list-item">{name} dpi</div></tpl>',
typeAhead: true,
mode: "local",
triggerAction: "all",// the plugin will work even if we modify a combo value
setValue: function(v){
v = parseInt(v) + " dpi";
Ext.form.ComboBox.prototype.setValue.apply(this, arguments);
}
},
{xtype: "combo",
displayField: "name",
fieldLabel: "Scale",
typeAhead: true,
mode: "local",
triggerAction: "all",
},
{xtype: "textfield",
name: "rotation",
fieldLabel: "Rotation"
}],
buttons:[{text: "Create PDF",
handler: function(){
// convenient way to fit the print page to the visible map area
printPage.fit(true)
}}]}]
}]
};

var action = new Ext.Action(actionConfig);

var mapPanelTbar = new Ext.Toolbar({
height: 30,
items: [
new Ext.Button(action);
]
});

dracofyre
24 Jul 2012, 7:57 AM
Here is a working version using Scott's supplied example.



Ext.onReady(function() {

var actionConfig = {
xtype: 'button',
text: 'Impresora',
menu: {
xtype: 'menu',
items: [{
xtype: 'container',
items: [{
xtype: 'form',
bodyPadding: 5,
items: [{
xtype: 'textfield',
fieldLabel: 'Titulo'
}, {
xtype: 'textfield',
fieldLabel: 'Comentario'
}, {
xtype: 'combo',
fieldLabel: 'Resolucion'

}, {
xtype: 'button',
text: 'boton'
}]
}]
}]
}
};
var action = new Ext.Action(actionConfig);


PanelMain = Ext.extend(Ext.Panel, {
height: 300,
width: 500,
title: 'My Panel',

initComponent: function() {
Ext.applyIf(this, {
tbar: {
xtype: 'toolbar',
items: [
new Ext.Button(action)
]
}


});

PanelMain.superclass.initComponent.call(this);
}

});

Ext.reg( 'panelmain', PanelMain ); // register xtype

var panel = new PanelMain({
renderTo: Ext.getBody()
});

});

scottmartin
24 Jul 2012, 8:17 AM
Glad to see you figure it out ;) .. thanks for the update!

Scott.

Gery
24 Jul 2012, 8:28 AM
really cool Dracofyre, it worked nicely. One thing I see is that now the fields on my form don't have the same size as they were inside the Ext.form.FormPanel, I read that's because the latter defines automagically the sizes, is there a workaround to do what Ext.form.FormPanel does? and even though this really works nicely, why is it not possible to put the Ext.form.FormPanel directly inside the Ext.Action? it would be easier in that way, isn't it?

thanks again for your cool support Dracofyre and Scott :)

Gery
24 Jul 2012, 1:07 PM
sorry about the last question, it was just a matter of width and bodyStyle, now it is great, thank you guys again, you rock ;)