Inside my FormPanel , I have a fieldset with a layout of 'column'.
I have tried several different config properties but i cannot get the label for my textfield to work. It just renders the textbox without a label.
(Obviously, if i make the layout type 'form', i have no issues). The text for the checkboxes shows fine, but the textbox label does not. Can someone point out what is wrong ?
thanks!
xtype:'fieldset',
title:'Transaction Status',
layout: 'column',
style:'margin:5px;'
,height:125//or:'-20', allowBlank:false}
,defaultType: 'checkbox'
,defaults: {
columnWidth: '.32',
border: false
},
items: [{
id:'check1-field',
name: 'check1',
boxLabel: 'DOT'
},{
id:'check2-field',
boxLabel: 'Results Matched',
name: 'check2'
},{
xtype:'textfield',
name: 'testname',
fieldLabel:'This doesnt show'
}
]
Ext Docs for TextField
"This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager."
So, since you have a layout of "column", I don't think it will render.
Best best is probably to place your check boxes in a separate field set below the text entry boxes, or just remove the column layout style and change it to form (the default).
I had the same problem with you..
I solved it using panel xtype.
set your checkboxes becomes the items of a panel.
Related
We have ExtJs fields in which LabelAlign is configured as 'top', but when we click on label it focusses the field, this creates problem if the field is checkbox, as on click of checkbox label it checks/unchecks the checkbox field. I have searched for some configs to disable the same , but couldn't find out. Later i used pointer-events:none CSS property on labels but not sure it will be correct solution. please guide.
Fiddle Example illustrating the above issue
You can prevent the click on the label from affecting the checkbox by removing the for attribute from the label. This will break the association between the label and the checkbox. To do this in ExtJS:
Ext.query('label[id^=checkbox]').forEach(function (item) {
item.removeAttribute('for');
});
This will find all of the labels for checkboxes and remove the for attribute so the label is no longer associated with the checkbox.
If you want to implement this for all fields, not just checkboxes, change it to search for all labels:
Ext.query('label').forEach(function (item) {
item.removeAttribute('for');
});
This code should be executed after your form is created.
See updated fiddle here.
There is no as such solution as far as i know for that because it will happen in every field not only in checkbox but there is a workaround that, you can add two xtypes as label and field needed and arrange them in vbox layout and give that label a 'html' config as that fieldlabel of the next field.
For e.g,
{
xtype:'container',
layout:{
type:'vbox'
},
items:[
{
xtype:'label',
html:'Email Address'
},
{
xtype:'checkboxfield',
name: 'email'
}
]
}
With this the container that will be made by extjs for checkboxfield will be different for label and field so when you click on label that's a different control for it and hence won't check the checkboxfield.
Whenever I add a form to a card layout, all the form items seem to disappear. I tested my layout here:
http://tof2k.com/ext/formbuilder/
with this code and got the same result, (use show/edit JSON to try it or build one yourself)
How can I make the for fields visible?
{
xtype:"panel",
title:"Panel",
items:[{
layout:"card",
title:"CardLayout Container",
activeItem:"0",
items:[{
xtype:"form",
title:"Form",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
}]
}]
}
I figured out the answer, ensure you set the height property of the form or else it will be hidden.
I'd like to use extjs grid cell edit function, besides textfield, datepicker, I also need a textfield with a button in the right to trigger a picklist modal window. It looks like to datepicker which has a calendar icon in a textfield in the right.
I tried fieldcontainer to combine a textfield with a button, however, it doesn't work. Thanks a lot for help!
Ext.define('CellPicklist', {
extend: 'Ext.form.FieldContainer',
xtype: 'cell-picklist',
layout: 'hbox',
width: 200,
items: [{
xtype: 'textfield',
}, {
xtype: 'button'
}]
});
columns: [{dataIndex: 'id',hidden: true},{text: 'Name', dataIndex: 'name', flex: 1, editor: 'cell-picklist'}]
You could either use a trigger field and implement your picker logic in the onTriggerClick method or define your own field by extending Ext.form.field.Picker, which is an abstract class for fields that show a picker on trigger click and therefore already provides some of the logic (such as displaying the picker under the trigger).
If you have a look at the class hierarchy of the datefield you will see how those classes are related:
Ext.Base
Ext.AbstractComponent
Ext.Component
Ext.form.field.Base
Ext.form.field.Text
Ext.form.field.Trigger
Ext.form.field.Picker
Ext.form.field.Date
I am trying to display checkboxes within checkboxgroups. To keep them lined up with the other fields in the form, I want to disable the group's fieldLabel, while keeping each checkbox's individual fieldLabel. However, if I set hideLabel to true for the checkboxgroup, the field labels for the individual checkboxes disappear also, even if I explicitly set hideLabel to false.
Is this going to be possible? Thanks for any help.
Edit: As requested, some code:
config = {
xtype: 'checkboxgroup',
hideLabel: true,
columns: 1,
items: [{
fieldLabel: 'Item 1',
hideLabel: false
}, {
fieldLabel: 'Item 2',
hideLabel: false
}]
};
Are you defining a boxLabel on the checkboxes? You should define the boxLabels on the combos and set hideLabel to true on the checkboxgroup.
I solved this using some custom CSS. Instead of setting display: none to any label elements that are descendants of a container with the x-hide-label class, it is only applied to labels that are direct children of such a container.
.x-hide-label label.x-form-item-label {
display: inline;
}
.x-hide-label > label.x-form-item-label {
display: none;
}
It's not perfect, but it works for me. Checkboxes and their labels remain aligned properly with all other form elements.
I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.
Any ideas?
My code:
drugDetailsPanel = new Ext.Panel({
layout:'form',
id:'drug-details-panel',
region:'center',
title:'Drug Details',
height:200,
collapsed:false,
collapsible:false,
items:[
new Ext.form.ComboBox({
fieldLabel:'What is the status of this drug?',
typeAhead:false,
store:drugStatusStore,
displayField:'lookup',
mode:'remote',
triggerAction:'all',
editable:false,
allowBlank:false,
emptyText:'Select a status..',
name:'/drug/drug-status',
id:'drug-status'
})
]
});
newDrugWindow = new Ext.Window({
title: 'Add Drug',
closable:true,
width:650,
height:650,
//border:false,
plain:true,
layout: 'border',
items: [drugDetailsPanel],
closeAction:'hide',
modal:true,
buttons: [
{
text:'Close',
disabled:false,
handler: function(){
newDrugWindow.hide();
}
},
{
text:'Save Drug',
handler: function(){
newDrugDialog.hide();
}
}]
});
Try to add shim: true to combo-box control.
Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...
This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window
Just give the combobox a (unique) name. Giving the combobox an inputId should also help
Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9