I have this code
var filter = {
items: [{
xtype: 'fieldset',
title: 'Choose',
items: [
// I need to put checkboxes here
]
}]
};
I need to dynamically add checkbox items:
{
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
The data that I need to add is stored in JS array, and checkbox can be checked or unchecked
Please help,
Thank you in advance
What is your issue? When do you add? What is the event?
filter.items[0].items[filter.items[0].items.length] = {
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
or
var checkbox = {
xtype: 'checkboxfield',
name: 'city[]',
label: 'City name',
checked: false,
}
var itemArr = filter.items[0].items;
itemArr[itemArr.length]=checkbox;
What is filter, is it a Container or does it extend from it (Panel, FormPanel, etc.)?
If so, you can use the add() method to dynamically add to it.
It's also good to note, that posting in the Sencha Forums will get your a much faster response.
Related
I have a combo box with the multiSelect property and I want to know how can I know how many items were selected. I tried with:
combobox.store.getCount();
but it tells me the total of items in my combo box instead of the total of items selected by the user. Basically I want to make a condition that will trigger when the user selects more than one option in the combobox
You can use combo.getPicker() method and picker have method to get selected records
In this FIDDLE, I have created a demo using combobox with multi-select. I hope this will help you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
// The data store containing the list of states
Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
storeId: 'states',
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.panel.Panel', {
title: 'Combo Example',
renderTo: Ext.getBody(),
items: [{
xtype: 'combo',
margin: 10,
fieldLabel: 'Choose State',
store: 'states',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
multiSelect: true,
}],
bbar: ['->', {
text: 'Get Selected',
handler: function () {
var selectionModel = this.up('panel').down('combo').getPicker().getSelectionModel();
record = selectionModel.getSelection();
console.log(record);
Ext.Msg.alert('Info', 'Number of Selected record is ' + selectionModel.getCount());
//Ext.Msg.alert('Info', 'Selected record is <br> '+ record.map(r=>{return r.get('name')}).join('<br>'));
}
}]
});
}
});
Here is a possible solution. Go to multiselect-demo.html, open your browser console (F12 on Google Chrome and Firefox) and type :
f = Ext.getCmp("multiselect-field");
f.on("change", function () {
console.log(this.getValue().length)
});
Then see what's happening when you change the selected values in the "MultiSelect Test". For more informations, see : http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.ux.form.MultiSelect-method-getValue.
I'm trying to group radio buttons in ExtJS without using the same name config. Is this possible? This is my code:
items:
[
{
xtype: 'radio',
name: 'is_self_employed',
boxLabel: 'Self Employed:'
},
{
xtype: 'radio',
name: 'is_voluntary',
boxLabel: 'Voluntary:'
},
{
xtype: 'radio',
name: 'is_ofw',
boxLabel: 'OFW:'
},
{
xtype: 'radio',
name: 'is_non_working_spouse',
boxLabel: 'Non Working Spouse:'
},
{
xtype: 'radio',
name: 'is_farmer_or_fisherman',
boxLabel: 'Farmer or Fisherman:'
}
]
you want radio buttons with different names?
Radio buttons are grouped by their name and that will break their functionality, unless you do some JS Code to fix what you broke.
The best way is to set the same name to all radios and set different inputValue for each.
Another possible way of implementation would be to trigger uncheck of other radio buttons manually while enabling one.
listeners: {
change: function(rd, value) {
if (value) {
var radios = rd.up("form").query("radio");
Ext.each(radios, function(r) {
if (r != rd)
r.setValue(false);
});
}
}
}
Fiddle: http://jsfiddle.net/gilsha/s48FD/51/
ExtJS 5
I have a grid and it has 3 columns (Id, Students,Selected Students). In column2 (Students), I have bind static data. When i click on any item of second column then this record should be added in column3 (Selected Students) in current record or row. I have one button also called (Add new item) used for creating new row dynamically.
Note - When i add a new row by clicking on Add new item button, then new row will be added and 3 column(Selected Students) value should be blank.
I have tried so much but didn't get solution. The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.
Ext.onReady(function () {
var comboStore1 = Ext.create('Ext.data.Store',
{
fields: ['text', 'id'],
data:
[
{ "text": "Value1", "id" :1 },
{ "text": "Value2", "id": 2 },
{ "text": "Value3", "id": 3 }
]
});
var comboStore2 = Ext.create('Ext.data.Store',
{
fields: ['text', 'id']
});
var gridStore = Ext.create('Ext.data.Store',
{
fields: ['id', 'students', 'selectedStudents'],
data:
[
{ "id" : 1},
]
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
height: 200,
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Add New Item',
handler: function () {
var store = Ext.getCmp('grdSample').store;
var rec = {
id: 1,
students: '',
selectedStudents: ''
}
store.insert(store.length + 1, rec);
}
},
{
xtype: 'grid',
id: 'grdSample',
store: gridStore,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columns: [
{
header: 'id',
dataIndex: 'id'
},
{
header: 'Students',
dataIndex: 'students',
editor: {
xtype: 'combobox',
store: comboStore1,
displayField: 'text',
valueField: 'text',
queryMode: 'local',
listeners: {
select: function (combo, records) {
var rec = records[0].data;
}
}
}
},
{
header: 'Selected Students',
dataIndex: 'selectedStudents',
editor: {
xtype: 'combobox',
id: 'combo2',
store: comboStore2,
displayField: 'text',
valueField: 'id'
}
}
]
}
]
}]
}).show();
});
I have tried almost everything but still i didn't get any solution. In another way - How to insert a value in grid editor combo only in current row. (Another row should not be reflected). If another row is being reflected, then how to remove value before rendering from another row without reflecting other rows.
Well, I guess main problem is that you trying to change certain grid row editor component while it suppose to be same for all grid rows.
The main problem is that when i bind data in third column then it binds proper, but when i add a new row, it also shows in new record also but it should not be. If i clear store or combo item, then it removes from all rows instead of current record/row.
It happens because all grid row editors use same store instance, comboStore2, and when you change its data you change it for all editors.
To create separate store for each editor you have to do something like this:
{
header: 'Selected Students',
dataIndex: 'selectedStudents',
editor: {
xtype: 'combobox',
id: 'combo2',
store: Ext.create('Ext.data.Store', {
fields: ['text', 'id']
}),
displayField: 'text',
valueField: 'id'
}
}
But than its become not trivial to select specific row editor component and its store.
I recommend you to take a look at Ext.grid.column.Widget as you can bind certain row (its record actually) to widget with its onWidgetAttach property.
Your second column is dummy.
You could directly use a tagfield component as the editor for your third column, which lets you select multiple values.
And you'll need a single store for the list of all students.
As per the requirement, I have a panel which contains grid and two buttons:
Grid Columns: ID, Name, Timezone
Buttons: Add, Save
I have switched on Cell editing for the grid.
Editor for ID - Textfield (Textfield id: IDEdit)
Editor for Name: Textfield (Textfield id: NameEdit)
Editor for Timezone: Textfield (Textfield id: TimezoneEdi)
Now when I click on Add, I add one BLANK row at the top with Blank ID, Name and Timezone so that user can add the record.
But I do not want user to edit ID if he is not adding the new row. Meaning when he double clicks on ID even if it has editor defined, I want it disabled.
So I have kept IDEdit as disbled in the beginning. On click of add I am making it enabled. Once user inputs data nad clicks on Save, I again make IDEdit as disabled. This works fine.
But now when I edit only Name and click Save, it says that cannot define disable property of undefined. This is happening because EditID has not been created yet.
Code is as below:
xtype: 'gridpanel',
height: 308,
id: 'MyGrid',
scrollable: true,
store: 'MyStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ID',
text: 'ID',
flex: 1,
editor: {
xtype: 'textfield',
disabled: true,
id: 'IDEdit'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name',
flex: 1,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'TIMEZONE',
text: 'TimeZone',
flex: 1,
editor: {
xtype: 'textfield'
}
}
On Save button:
Ext.Ajax.request({
Ajax request to server
},
success: function(response) {
var status = response.responseXML.getElementsByTagName('Row')[0].childNodes[0].childNodes[0].nodeValue;
var message = response.responseXML.getElementsByTagName('Row')[0].childNodes[1].childNodes[0].nodeValue;
if(status === '1'){
store.removeAll();
store.load();
Ext.getCmp('IDEdit').disable();
}
else{
Ext.Msg.alert('Failure', message);
}
}
});
}
How can I avoid this error? How can I check whether IDEdit exists or not before making it enable/disable?
Thanks !
First, using id as identificator in big application is very bad idea since you need to watch about unique id on every component in your application.
Better solution is using itemId.
So it should be something like this:
editor: {
xtype: 'textfield',
disabled: true,
itemId: 'IDEdit'
}
Then you could check whatever component exists in this way:
var components = Ext.ComponentQuery.query('gridpanel > gridcolumn > textfield[itemId=IDEdit]');
if(!Ext.isEmpty(components)){
//which is working
//components[0].setDisabled(true);
//or
//components[0].disabled()
}
My suggestion would be not to define any editor for 'ID' column in this situation. When you click on Add button, create a record with new unique ID or set default value '-1' (negated values[-1,-2,-3,...,-n] if u are doing multi add action) and insert it on top like you are doing. Set the other values like you are doing already.
I have did one common view, this view is required in all the pages. so wherever i need, i am calling this view of xtype . Within this common view have some components with defined by id value.
As per requirement depends on pages i need to hide some button from common view again need to show. These activities will come depending on pages. While first launching time screen will come. once i navigating to another page it will show error like Ext.AbstractManager.register(): Registering duplicate id "btnLogout" with this manager.
If i changed componets id value to name value or itemId value. then it will navigate fine but problem is not able to hide and show the buttons because showing undefined sysntax is var a = Ext.getCmp('btnBackID'); console.log(a);, it will be undefined. once the component returns as object, i can do hide show functionality.
Can any one tell how resolve this issue else give me alternate ways to achieve. great appreciate. Thank you. i have given my code below
Common View
Ext.define('abc.view.GlobalNavigationView', {
extend:'Ext.panel.Panel',
alias:'widget.globalNavigationView',
id:'globalNavigationId',
layout: {
type: 'vbox',
align:'stretch'
},
items:
[
{
xtype: 'toolbar',
layout: 'hbox',
flex: 1,
items:
[
{
xtype: 'button',
flex: .1,
text: 'Back',
id: 'btnBackID',
},
{
xtype: 'button',
flex:.1,
id: 'btnSave',
cls: 'saveCls'
},
{
xtype: 'button',
flex:.1,
id: 'btnEmail',
text: 'Email'
},
{
xtype: 'button',
flex:.1,
id: 'btnPrint',
text: 'Print'
},
{
xtype: 'button',
flex:.1,
itemId: 'btnFilter',
text: 'Filter'
},
{
xtype: 'button',
flex:.1,
id: 'btnLogout',
cls: 'logoutCls'
}
]
}
]
});
HomeView1
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly1',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
.........................
}
]
});
HomeView2
Ext.define('GulfMark.view.WeeklyHomeView1', {
extend:'Ext.panel.Panel',
alias:'widget.weeklyfcastView',
id:'weeklyfcastId',
layout: 'fit',
items:
[
{
xtype: 'globalNavigationView',
id: 'globalNavigationWeekly2',
flex: 1,
docked:"top",
scrollable:false
},
{
my componets of this view
-----------------------
}
]
});
Controller Code:
init:function(){
this.control({
'globalNavigationView ':{
click:this.onbtnBackClick,
render: this.onbtnBackrender,
},
'weeklyfcastView':{
show:this.onShowweeklyfcastView,
render:this.onRenderweeklyfcastView
}
});
},
onShowweeklyfcastView: function(){
var btnFilter = Ext.getCmp('btnFilter');
console.log(btnFilter); // if i used components id to name or itemId, here will show undefined
btnFilter.setHidden(true);
//btnFilter .hide();
}
If your view is not a singleton, you cannot give IDs to its components - IDs must be unique, or you get the duplicate id error.
What you really need is some reference to the view from which you are trying to show/hide buttons. When you have that reference, you can use the down method to find your buttons. For example:
var iPanel = // Create new panel here.
iPanel.down('button[text="Email"]').hide();
This code works in EXTJS 6 for multiple buttons in the same view, having the same itemId (not id - ids will throw an error, as noted above)
View:
{
xtype : 'button',
text : 'Save and Come Back Button 1',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
{
xtype : 'button',
text : 'Save and Come Back Button 2',
itemId : 'saveAndComeBackButton',
handler : 'saveAndComeBack'
},
Controller:
this.__setButtons('#saveAndComeBackButton','disable');
__setButtons: function (buttonItemId,state) {
Ext.Array.forEach(
Ext.ComponentQuery.query(buttonItemId),
function (button){
if (state === 'enable'){
button.enable();
}else{
button.disable();
}
}
);
}