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..
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 have combobox with pagination inside:
var itemsSelect = Ext.create('Ext.form.ComboBox', {
id : 'itemsControllerSelect',
emptyText : 'not found',
pageSize: true,
store : {
type : 'store',
autoLoad: true,
pageSize: 4,
proxy : {
type: 'api',
url : SITE_URL + '/api/items'
}
},
triggerAction: 'all',
displayField : 'name',
valueField : 'id'
});
When I set value for edit using Ext.getCmp('itemsControllerSelect').setValue(5);
Inside combo displayed id item, but I want to display name.
If I set value using id witch is on first page all work corecctly.
I think the problem is that I do not have this item in store because item with this id is only second page in pagination.
How can I resolve this problem?
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"?
I have an Ext combo box in a form panel as following.
new Ext.form.ComboBox({
store : routeStore,
displayField : 'rName',
valueField : 'rName',
fieldLabel : 'Select Fixed Route',
id : 'routeCombo',
typeAhead : true,
forceSelection : true,
mode : 'local',
triggerAction : 'all',
selectOnFocus : true,
editable : true,
hidden : false,
disabled : true,
minChars : 1,
hideLabel : true,
width : 210,
emptyText : 'Select Fixed Route'
})
An also I have a label like this.
{
xtype : 'label',
id : 'idTourCode',
text : 'SystemDate',
forId : 'myFieldId',
style : 'marginleft:10px',
//autoWidth : true,
flex : 1
}
Now I need to concatenate the selected value of the combo box to my label text. This label already has a text. What I want is, the selected value of the combo should be concatenate to this label text. All of these things should be happen on a button click.
I've tried to find a solution but no luck. Therefore, please be kind enough to help me to clarify my problem.
Thanx a lot
This is a crude fix.
Add this to your combobox:
listeners: {
change: function(box, newValue)
{
Ext.ComponentQuery.query("#myLabel")[0].setText(newValue)
}
Add this to your label:
itemId: 'myLabel'
You should polish this a bit and find a better to access you combobox than Ext.ComponentQuery, because it is really slow.
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]')