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.
Related
I am getting flag ratingStatusKey from back-end if its RA_RT_Edit i want to show add/edit link and if its non-editable status i want to hide it this is implemented on kendo grid but its not working , Any idea what i am doing wrong..
config.js
columns: [{
field: '',
title: 'Action',
width: '8em',
template: '# if (ratingStatusKey === \'RA_RT_EDITABLE\'){# <span>Add/Edit</span> # } #'
},{
field: 'ratingDateHistory',
title: 'History',
width: '8em'
}]
I'm not familiar with kendo, but have you tried changing the 'if' to 'ng-if'?
ngIf is a directive that only displays an element if the expression evaluates to truthy
so you might add an attribute to the element like so:
ng-if="ratingStatusKey==='RA_RT_EDITABLE'"
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 got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes
I've created a panel bundled with an Ext.Template. This panel is contained in another panel that starts its life collapsed.
id: 'myPanel',
title: 'My Title',
layout: 'border',
collapsible: true,
collapsed: true,
hideCollapseTool:true,
bodyBorder: false,
height: 300,
bodyStyle: 'background:#F9F9F9;',
items: [{
id: 'myDisplayPanel',
bodyStyle: 'background:transparent;',
width: 300,
border: false,
margins: '5 5 5 5',
region: 'west',
tpl: new Ext.Template([
'some template'
])
},
{
id: 'myForm',
xtype: 'form',
bodyStyle: 'background:transparent;',
border: false,
margins: '5 5 5 5',
region: 'center',
[...]
This template-panel is supposed to be updated as the result of a row select in a neighbouring grid. But I get an error the first time I call .update(data); on the myDisplayPanel, as it contains no body element.
myGridSelectionModel: new Ext.grid.RowSelectionModel({
singleselect: true,
listeners: {
rowselect: function(sm,rowIdx,r) {
Ext.getCmp('myDisplayPanel').update(r.data);
Ext.getCmp('myPanel').expand(true);
}
}
}),
The call to myDisplayPanel.update() causes an error when Ext tries to call the template.overwrite function with myDisplayPanel.body as the first param.
function(b,a,c){b=Ext.getDom(b);b.innerHTML=this.applyTemplate(a);
Is it possible somehow to force Ext to generate a body element for this hidden panel before it is beeing shown? I've tried to expand the element prior to updating it, but this has now effect...
I know this thread is 2 months old, so I'm not sure if you ever found a solution. However, I just ran into the same thing and came across your thread while looking for an answer. This is what I ended up doing:
Where you're currently running panel.update(content), try this:
if(panel.rendered) panel.update(content);
else panel.contentToLoad = content;
Set up a listener for the render event to run:
if(this.contentToLoad) panel.update(this.contentToLoad);
That way, if the panel isn't rendered, it will store the content somewhere and the render listener will load whatever is there when the panel IS rendered.
Collapsed panels (and hidden containers in general) by default do not layout their children until they first become visible. You can override this behavior by setting forceLayout: true on the collapsed container. As the name suggests, this will force the container to perform its layout whether it is visible or not. Note that in your case this would be myPanel that would need this configuration, not myDisplayPanel.
You might try Panel's elements config, which from the docs is "A comma-delimited list of panel elements to initialize when the panel is rendered." So e.g.,
elements: ['header','body']
However it already defaults to 'body' only, so it may just be that the panel is truly not rendered yet when you are updating it. Try reversing the order of your calls so that the container is expanded first (should force the child panel to render) then update it.
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.