PDA

View Full Version : Placing check box before Input field



prakashkadakol
4 Apr 2012, 11:04 PM
I have Panel with set of fields,Those fields have some bundled validation rules
and other functions like setValue,InitValue etc.Now am trying to insert check box field at the
run time,Tryed with insert add funtions of Ext JS,but they are inserting on separate row
of the panel,But i need to insert this checkbox before one of the input field,For that
I have created new panel with new input field and check box and added to parent panel
this works fine from placing check box before input field point of view,But the
problem is input field loosing its native configuration options like setValue,initValue,validator etc
and throws error,Any suggestion to place check box without harming the input field components.

vietits
5 Apr 2012, 12:15 AM
FYI


Ext.onReady(function(){
Ext.create('Ext.form.Panel',{
renderTo: Ext.getBody(),
bodyPadding: 10,
width: 200,
height: 100,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'checkboxfield'
},{
xtype: 'textfield'
}]
}]
});
});

prakashkadakol
5 Apr 2012, 12:54 AM
Hi

I already have Form Panel,Now i wanted to append check box to existing form input field

vietits
5 Apr 2012, 1:34 AM
My example suggests you how to put checkbox on the same line with textbox by using fieldcontainer with hbox layout.
It's easy add checkbox dynamically before textbox.


Ext.onReady(function(){
var form = Ext.create('Ext.form.Panel',{
renderTo: Ext.getBody(),
bodyPadding: 10,
width: 200,
height: 100,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
// xtype: 'checkboxfield'
// },{
xtype: 'textfield'
}]
}]
});

form.down('fieldcontainer').insert(0, {xtype:'checkboxfield'})
});

prakashkadakol
5 Apr 2012, 1:54 AM
thanks for your suggestions,But am not creating another new input field,I wanted to add check box before existing input field,your example demonstrate adding new input field and check box right.

vietits
5 Apr 2012, 2:05 AM
My first example shows the way to put checkbox and textbox on the same line.
My second example shows how to dynamically add a checkbox before an existing textbox.

prakashkadakol
5 Apr 2012, 2:15 AM
ok thanks i got it,But i do not wanted to touch existing text field,That is pushing into another panel,That was main problem i am facing because of that its native methods wont work like setValue,initValue etc,Is there any way i can query that input field and place check box before that input field.
Am using Ext.formPanel component

vietits
5 Apr 2012, 2:22 AM
ok thanks i got it,But i do not wanted to touch existing text field,That is pushing into another panel,That was main problem i am facing because of that its native methods wont work like setValue,initValue etc,Is there any way i can query that input field and place check box before that input field.
Am using Ext.formPanel component

My example shows how to put a checkbox before (an on the same line) an existing textbox on an existing form. I don't know what your code looks like so I just create a form with a textbox and then dynamically add a checkbox before that textbox.