PDA

View Full Version : [SOLVED] Form elements AND form buttons in one row... HOW??



violinista
20 Jun 2007, 1:12 AM
Hello to all extJs gurus,

I have a small problem, adding a button to form, whose elements are in one row, like this:



frmTest.column({width:100, hideLabels:true}, txtField1);
frmTest.end();
frmTest.column({width:100, hideLabels:true}, txtField2);
frmTest.end();
frmTest.column({width:100, hideLabels:true}, txtField2);
frmTest.end();
All is working well, but if I try:



frmLea.addButton('Save', function(){/* Some function here */}));
... the button is added BELOW all fields, which is not wished result, although it is default behaviour. I want to add simple form button with some function NEXT to txt fields. Tried also:



frmTest.column({width:150, hideLabels:true},
frmTest.addButton('Test', function(){}));
frmTest.end();
...But this not resulted in desired way. Is there a standard ExtJs method (which I use whenever I could) to achieve button aligning next to txtFields, or I must inject Html and juggle with DOM elements (not wish that...)?

Thanks in advance!

Regards, Violinista

zoq
26 Jun 2007, 12:26 AM
I'm facing the same problem, can anybody give an advice ?

KRavEN
26 Jun 2007, 3:58 AM
I have mine in a fieldset->container->column heirarchy.

When you use a container you don't have to end each column, you just do the one end for the container.

I then Ext.get on the containers id, create a child div before the last child of the container so I'm in before the close. The div must have the correct classes and width to work with the other columns, then I add the button to the div. Finally I create the eventhandler for the button.

All this is after initial render of course.


ipFld = Ext.get('ipStart');
ipBtnDiv = ipFld.createChild({tag:'div', cls: 'x-form-ct x-form-column x-form-label-right', style: 'width:25px;'},ipFld.dom.lastChild);
addIpButton = new Ext.Button(ipBtnDiv, {
cls: 'x-btn-icon barrow '
});
addIpButton.on("click", addIp.createCallback('App Server IP','appIP',ipFld,type));

violinista
27 Jun 2007, 3:38 AM
We tried so hard, and solution is so simple:



frmTest.column({width:100, hideLabels:true}, txtField1);
frmTest.end();
frmTest.column({width:100, hideLabels:true}, txtField2);
frmTest.end();
frmTest.column({width:100, hideLabels:true}, txtField2);
frmTest.end();



frmTest.column({width:100, hideLabels:true},
new Ext.Toolbar.Button({
text:"ButtonText",
handler:function(){/*some function here*/}
//more config options could be added here,like callback etc.
})
);
frmTest.end();




:D