I'm trying to do something, i think, that should be relatively simple with EXT.js 4, but I can not find an answer. I'm trying to create a checkbox with a type of "checkbox" currently when I try it renders it as a type="button"
here is a sample of what I'm doing (I belive this code comes from Sencha itself, but it is what I am trying to do)
THIS CODE
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width : 300,
title : 'Pizza Order',
items: [{
xtype : 'fieldcontainer',
fieldLabel : 'Toppings',
defaultType: 'checkboxfield',
items: [{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
id : 'checkbox1'
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
id : 'checkbox2'
}, {
boxLabel : 'Bacon',
name : 'topping',
inputValue: '3'
id : 'checkbox3'
}]
}],
bbar: [{
text: 'Select Bacon',
handler: function() {
var checkbox = Ext.getCmp('checkbox3');
checkbox.setValue(true);
}
},
'-',
{
text: 'Select All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(true);
checkbox2.setValue(true);
checkbox3.setValue(true);
}
},{
text: 'Deselect All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(false);
checkbox2.setValue(false);
checkbox3.setValue(false);
}
}],
renderTo: Ext.getBody()
});
RENDERS
<input type="button" hidefocus="true" autocomplete="off" class="x-form-field x-form-checkbox x-form-cb" id="checkbox1-inputEl" aria-invalid="false" data-errorqtip="">
Notice the type="button"? I nee the type to be a "checkbox"
Let me include the reason, maybe I am approaching this wrong. I am trying to make JAWS reader read the checkbox the way it should. As a type "button" JAWS reader reads it like a button and dose not read the label that goes with the check box.
Hope this makes since, please ask any question you need to and thanks for any help.
Ross
You can do this using config autoEl. Check this fiddle: http://jsfiddle.net/vdazU/3262/
{
xtype: 'component',
autoEl: {
html: '<input type="checkbox" id="checkbox1" name="topping" >Anchovies'
}
If you inspect the DOM, you will be able to see a html input checkbox.
I had the same problem, so almost 2 years later, here's your answer:
You need to include the css! It took me hours to figure this out.
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css">
BTW, put a comma after the 3.
inputValue: '3',
I had run your code at my end and its working fine. I am using extjs 6.0.2 and I think what you are seeing is that box that needs to be checked prefix to the label. It always remains as a button only. Even if you use a radiofield, then also it will be type="button" in dom because that box has to handle click event which can be handled by type="button". Can you provide the reason why you need it as type="checkbox"?
Related
The application I am working on is based on ExtJS, and what I would like to do is to allow the use to check only one checkbox.
The thing is that my application is very complex, and I don't really know a lot on ExtJS. The checkbox is initialized in a class viewport.js like this :
Ext.define('Viewport', {
extend : 'Ext.container.Viewport',
require : ['A','B'],
frame : true,
layout : 'fit',
items : [{
xtype : 'container',
layout : 'hbox',
margins : "a b c d",
items : [{
margins : "0 0 5 35",
name : 'box1',
inputValue : true,
xtype : 'checkbox',
id : 'box1-box-id',
boxLabel : "BOX 1"
}
,{
margins : "0 0 5 35",
name : 'box2',
inputValue : true,
xtype : 'checkbox',
id : 'box2-box-id',
boxLabel : "BOX 2"
}]
}
})
I don't know how to modify this code to have the user checking only one of these checkboxes. Do I have to add a function in this class?
There are various approaches how to do this, the most straightforward and explicit way to achieve this is to add listeners to the checkboxes:
On the first checkbox definition, add:
listeners: {
change: function(checkbox, newValue) {
if(newValue) { // if this checkbox is changed to "checked" state...
checkbox.nextSibling().setValue(false); // uncheck next checkbox
}
}
}
On the second checkbox definition, add:
listeners: {
change: function(checkbox, newValue) {
if(newValue) { // if this checkbox is changed to "checked" state...
checkbox.previousSibling().setValue(false); // uncheck previous checkbox
}
}
}
Of course this does not scale well if you have more than just a few checkboxes. But then, for more than a few checkboxes this usually is bad UX anyways and you want to rethink your application from a user PoV.
I'm looking at an older project that is using ExtJS. Admittedly, I'm not too familiar with this framework so I learn as I go and as I am asked to fix things. My issue is that there is a grid and each column uses allowBlank: false. This causes a tooltip box to display with some info about what field(s) need to be populated. This all works great, but I am trying to change that text in that tooltip i.e. "Error", "Benefit Category Name: This field is required", and I can't seem to make this work. How can I target and change that text? I'll include a screenshot of the grid and tooptip that I am talking about for reference. I am also using ExtJS version 6.
Here is a sample of one of the grid columns:
columns: [
{
dataIndex: 'benefit_category_name',
text: 'Benefit Category Name',
flex: 1,
editor: {
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: [
'benefit_category_id',
'benefit_category_name',
],
data: [],
}),
queryMode: 'local',
valueField: 'benefit_category_name',
displayField: 'benefit_category_name',
emptyText: 'Select one',
listeners: {
select: 'handleComboChange',
},
itemId: 'benefit_category_id',
allowBlank: false,
listeners: {
renderer: function(value, metaData) {
metaData.tdAttr = Ext.String.format('data-qtip="{0}"', value);
return value;
}
}
}
},
{
...
}
]
I tried to use the metaData property I read about in some other posts, but I can't seem to change the tooptip text (Error, Benefit Category Name: This field is required).
Here is a screenshot of the tooltip mentioned. I know this is an older framework, but any tips I could get would be useful. Thanks for your time.
Thats a simple validation example with custom message.
Ext.create({
xtype: 'textfield',
allowBlank:false, // will show required message - remove key to display vtypeText only
validateBlank: true,
vtype: 'alpha', // check for available types or create / extend one
vtypeText: 'Please change to what you want ...',
renderTo: Ext.getBody()
})
Details:
https://docs.sencha.com/extjs/6.5.3/classic/Ext.form.field.VTypes.html
https://fiddle.sencha.com/fiddle/3770
I am working with ExtJS and I have a textfield component.
I would like to disable only the inputEl of a textfield component (not the label).
If I use the setDisabled() method of the textfield, then it sets disabled the inputEl but also the label.
I have used also the setReadOnly() method, but it does not grey out the inputEl, only set as ReadOnly.
Is there a way to disable only the inputEl of a textfield component?
Thanks for your help.
You will have to set a custom class to the disabledCls
.ux-item-disabled .x-form-field, .ux-item-disabled .x-form-display-field, .ux-item-disabled .x-form-trigger {
filter: alpha(opacity=30);
opacity: .3;
}
see JSFiddle
What about this one?
items: [{
xtype: 'textfield',
name: 'item',
itemId: 'item',
readOnly: true,
listeners:{
afterrender: function(f){
c.inputEl.addCls('x-item-disabled');
}
}]
You could even make it change dicamically if you include an if befor apply the class
I have got another answer from the Sencha forum (I thought it may be interesting to post it here also)
Solution:
Use the setOpacity method
Ext.onReady(function () {
var panel =Ext.create('Ext.form.Panel', {
title: 'Basic Form',
renderTo: Ext.getBody(),
bodyPadding: 5,
width: 350,
items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField',
disabled: true
}]
});
panel.down('[xtype=textfield]').labelEl.setOpacity(1); });
I'm trying to select multiple objects (2 labels & 2 textfields) that are located in a panel. I gave these components a property (changeVisibility: true).
So the thing i'm trying to accomplish here is quite simple: when the user checks the checkbox, all the components with the property (changeVisibility:true) should become invisible. So in my controller i'm trying to select these components but i'm unable to accomplish this thusfar.
Help is much appreciated!
Code of my panel:
Ext.define('Edocs.view.wizard.card-2.content.mobile-password.Panel', {
extend : 'Ext.FormPanel',
alias : 'widget.mobilePassword',
layout : {
type : 'vbox',
pack: 'center'
},
bodyStyle:{"background-color":"beige"},
border:false,
defaults:{
width: '100%'
},
items: [{
xtype : 'checkboxfield',
boxLabel : 'Enable mobile (iphone) accesibility',
boxLabelAlign : 'before',
name : 'enableMobile',
inputValue : '1',
id : 'cbxMobile',
itemId : 'cbxMobile'
},{
xtype: 'label',
text: "Please enter a password to connect to the platform by mobile (iphone/ipad)",
style: 'font-weight:bold;',
changeVisibility :true
},{
xtype: 'textfield',
name: 'mobilePassword',
id: 'txtMobilePassword',
inputType: 'password' ,
changeVisibility :true
//width: '100%'
},{
xtype: 'label',
text: "Confirm password",
style: 'font-weight:bold;',
changeVisibility :true
},
{
xtype: 'textfield',
name: 'mobilePasswordConfirm',
itemId: 'txtMobilePasswordConfirm',
inputType: 'password' ,
vtype: 'password',
initialPassField: 'txtMobilePassword',
changeVisibility :true
}],
initComponent : function() {
Ext.apply(this, {})
this.callParent(arguments);
}
});
This is the function in my controller (this function is called on the change event of the checkbox):
addMobilePassword : function(checkbox) {
var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
if (checkbox.checked){
for (var i in items){
items[i].setVisible(false);
}
}
}
I'm having troubles with this selector:
var items = checkbox.up().down('mobilePassword[changeVisibility=true]');
If anyone could give me some advice on how to select these components.
Thanks!
down() will find the first matched descendant of the container. So I think you should try:
checkbox.up().down('mobilePassword').query('label[changeVisibility], textfield[changeVisibility]')
or briefer
checkbox.up().query('label[changeVisibility], textfield[changeVisibility]')
Try query('[changeVisibility=true]')
I have bottom bar added to a panel like this
bbar: [{
xtype : 'button',
text : 'Select Filter By',
itemId : 'filter_by',
arrowAlign : 'right',
menu : [{
text : 'Item Code',
checked : true,
group : 'filter',
itemId : 'item_code'
},{
text : 'Description',
checked : false,
group : 'filter',
itemId : 'description'
}]
}]
how to get the which is checked from these two?
Regards
In this case, they both can be checked or unchecked.
You can give an id to each and then simply do Ext.getCmp('id1').getValue() and Ext.getCmp('id2').getValue() to get the state of each
If you want to use these as a "group", you will have to wrap them in a CheckboxGroup or RadioGroup depending on your requirement.
try this
the idea is just add a listener to each Ext.menu.Menu.
if you are working with your own class, you can make testCheck as one of your method..