Retrieve and click the checkbox from Ext model programmatically - javascript

How to retrieve and click the checkbox "Alabama" programmatically? i have tried many ways but fail to retrieve the checkbox on the ext combobox model.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.widget({
xtype: 'combobox',
renderTo: document.body,
fieldLabel: 'Combobox',
labelAlign: 'right',
displayField: 'name',
id: 'multiComboBox',
multiSelect: true,
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="x-boundlist-item">', '<input type="checkbox" />', '{name}', '</div>', '</tpl>'),
store: Ext.create('Ext.data.Store', {
fields: [{
type: 'string',
name: 'name'
}],
data: [{
"name": "Alabama"
}, {
"name": "Alaska"
}, {
"name": "Arkansas"
}, {
"name": "California"
}]
}),
queryMode: 'local',
listeners: {
select: function (combo, records) {
var node;
Ext.each(records, function (rec) {
node = combo.getPicker().getNode(rec);
/*Ext.get(node).down('input').set({
checked: true
});*/
Ext.get(node).down('input').dom.checked = true;
});
},
beforedeselect: function (combo, rec) {
var node = combo.getPicker().getNode(rec);
/*Ext.get(node).down('input').set({
checked: undefined
});*/
Ext.get(node).down('input').dom.checked = false;
}
}
});
}
});
I have done something like below. it was selected and show the name on the field. However, when i opened the dropdown list, the checkbox isn't checked. the following code cannot direct to select function of the listener
Ext.getCmp('multiComboBox').select('Alabama')

Related

Dynamically changing property field in ExtJs Grid

I am using a grid with a checkbox and a combobox. Right now I am trying to find a way to make the combobox multi select if the checkbox is checked in roweditor.
var pEditing =
Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToMoveEditor: 2,
errorSummary: false,
autoCancel: false,
listeners:
{
change: function (newValue, oldValue, eOpts)
{
if (newValue.value == true)
{
this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
}
else
{
this.down().down('grid').queryById('comboboxColumn').multiSelect = false;
}
console.log("Checkbox Change Debug");
}
}
});
Grid creation code :
{
renderer: renderCheckbox,
itemId: 'checkboxColumn',
header: 'Checkbox',
width: 100,
sortable: false,
dataIndex: 'ddCheckbox',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor',
listeners:{
change: function (newValue, oldValue, eOpts) {
pEditing.fireEvent('change',newValue, oldValue, eOpts);
}
},
},
},
{
header: 'Speed',
dataIndex: 'ddSpeed',
itemId: 'comboBoxColumn',
width: 125,
editor:
{
xtype: 'combo',
editable: false,
multiSelect: false,
store:
[
['1', '1'],
['2', '2'],
['3', '3'],
['4', '4'],
['5', '5']
]
}
}
Right now the event is firing off and I can see the debug message printed to the log. However the multiselect property is not persisting after the event is fired. Is there any easy way to change the property of this combobox in the row? For example, if there are 3 rows in the grid, row one can have the checkbox checked, and multiple values selected while row two has the checkbox unchecked and only one selection can be made? I know I can find the index of the checkbox selected by using in the change function.
this.down().down('grid').getSelectionModel().getSelection()[0].getData()
Thanks
"multiselect" property is not persisting because, your below code is not yet reach till combo box control.
this.down().down('grid').queryById('comboboxColumn').multiSelect = true;
As per your code, combo box control is under 'comboBoxColumn' item. So specify "itemID" for combo box like
xtype: 'combo',
editable: false,
multiSelect: false,
itemId: 'comboBoxItems',
store:[....]
Then, try below code
this.down().down('grid').queryById('comboboxColumn').queryById('comboBoxItems').multiSelect = true;
As you using RowEditing plugin
In checkbox on value change event you will get 4 parameters change:function(field, newValue, oldValue, eOpts)
1) Usign field parameter you will get your selected row(roweditor) like this field.up().
2) Using this roweditor you can use roweditor.down() method and get your combo.
3) After that getting your component(combo) and using second parameter newValue you can set multiSelect like combo.multiSelect = newValue
Here is I have created an sencha fiddle demo.
Hope this will help you to achieve your solution or requirement
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'combobox',
allowBlank: false
}
}, {
header: 'Multiple',
dataIndex: 'multiple',
sortable:false,
menuDisabled:true,
flex: 0.5,
editor: {
xtype: 'checkboxfield',
// checked:true,
listeners: {
change: function (field, newValue) {
var combo = field.up().down('#state');
combo.reset();
combo.multiSelect = newValue
}
}
}
}, {
header: 'States',
dataIndex: 'states',
flex: 1,
editor: {
xtype: 'combo',
store: states,
itemId: 'state',
queryMode: 'local',
displayField: 'name',
multiSelect:true,
valueField: 'abbr',
filterPickList: false,
listeners:{
afterrender:function(){
this.multiSelect=false;
}
}
}
}],
selModel: 'rowmodel',
plugins: {
ptype: 'rowediting',
clicksToEdit:1
},
height: 200,
width: '100%',
renderTo: Ext.getBody()
});

How to display html as text inside EXTJS combo box

Paste the code blow inside Sencha fiddle. Look at the item that reads ProblemElement.
Ext.define('DropDownList', {
extend: 'Ext.form.ComboBox',
editable: false,
alias: 'widget.dropdownlist',
initComponent: function() {
this.callParent([arguments]);
},
onRender: function() {
this.callParent();
}
});
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [
{
"name": "Alabama"
},
{
"name": "Alaska"
},
{
"name": " <input value='ProblemElement'>"
}
]
});
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.form.Panel', {
items: [{
xtype: 'dropdownlist',
hideLabel: false,
title: 'ComboBox Test',
fieldLabel: 'Choose State',
store: states,
displayField: 'name',
htmlEncode: true,
renderTo: Ext.getBody()
}]
});
}
});
The problem I am facing is that the item displayed in the dropdown is being rendered as HTML. However after I select it it displays correctly as text (<input value='ProblemElement'>), the way I want it.
The dropdown list is actually a Boundlist, and how item text is displayed is controlled by its getInnerTpl method. You can customize the combo's dropdown with listConfig so that the inner text is passed through Ext.String.htmlEncode:
listConfig: {
getInnerTpl: function(displayField) {
return '{[Ext.String.htmlEncode(values.' + displayField + ')]}';
}
}
Full example: https://fiddle.sencha.com/#fiddle/rkk

Get container's record on "initialize" in Sencha Touch

I have a listContainer and on tap of any item in the list, I open another page known as editContainer with the record from list. In the edit page, I want to disable a dropdown based on the value of another field, is there any way I can get the values in record in the initialize function of editContainer? Here is my code:-
onListItemTap:function(dataview,index,target,record,e,eOpts)
{
if(record)
this.editContainer = Ext.create('myApp.view.EditContainer',{title:'Edit Data'});
this.editContainer.setRecord(record);
this.getMainNav().push(this.editContainer);
}
Above code opens editContainer when a list item is selected. Below is my EditContainer
Ext.define('myApp.view.EditContainer', {
extend: 'Ext.Container',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Select'
],
config: {
id: 'editContainer',
autoDestroy: false,
layout: 'fit',
items: [
{
xtype: 'formpanel',
id: 'editFormPanel',
padding: 10,
styleHtmlContent: true,
autoDestroy: false,
layout: 'fit',
items: [
{
xtype: 'fieldset',
id: 'nameFieldSet',
autoDestroy: false,
items: [
{
xtype: 'textfield',
id: 'siteName',
itemId: 'mytextfield',
label: 'Name',
labelWidth: '35%',
name: 'name'
},
{
xtype: 'selectfield',
id: 'role',
itemId: 'myselectfield4',
label: 'Role',
labelWidth: '35%',
name: 'role',
options: [
{
text: 'Unassigned',
value: 'Unassigned'
},
{
text: 'Role1',
value: 'role1'
}
]
},
{
xtype: 'selectfield',
id: 'type',
label: 'Type',
labelWidth: '35%',
name: 'type',
options: [
{
text: 'Default',
value: 'Default'
},
{
text: 'Custom',
value: 'custom'
}
]
},
{
xtype: 'selectfield',
id: 'roleValue',
label: 'Role Value',
labelWidth: '35%',
name: 'rolevalue',
options: [
{
text: 'value1',
value: 'value1'
},
{
text: 'value2',
value: 'value2'
},
{
text: 'value3',
value: 'value3'
}
]
}
]
}
]
}
],
listeners: [
{
fn: 'onTextfieldKeyup',
event: 'keyup',
delegate: 'textfield'
},
{
fn: 'onSelectfieldChange',
event: 'change',
delegate: 'selectfield'
}
]
},
onTextfieldKeyup: function(textfield, e, eOpts) {
this.fireEvent('change', this);
},
onSelectfieldChange: function(selectfield, newValue, oldValue, eOpts) {
this.fireEvent('change', this);
},
initialize: function() {
this.callParent();
var record;
//Code to disable roleValue selectfield if Role is unassigned.
},
updateRecord: function(newRecord) {
var me = this,
myPanel = me.down('#editFormPanel');
if(myPanel)
myPanel.setRecord(newRecord);
},
saveRecord: function() {
var me =this,
myStore = Ext.data.StoreManager.lookup('MyStore');
var formPanel = me.down('#editFormPanel'),
record = formPanel.getRecord();
formPanel.updateRecord(record);
return record;
}
});
Since creating your editContainer and setting its data are two different steps in your code you can't use the initialize method of the editContainer.
But you can override the setRecord method of the editContainer, so it additionally disables the dropdown.
Since you push the editContainer onto a navigation view you could also use the activate event of the editContainer to disable the dropdown.
Maybe you can create a quick store on the fly, as a place to have a reference to that data...
//in your controller where you set the record
var mod = Ext.define('app.model.PanelDataModel', {
extend: 'Ext.data.Model',
config: {
fields: [
'roleValue'
]
}
});
var sto = Ext.create('Ext.data.Store', {
model: mod,
id:'PanelDataStore'
});
sto.add({
roleValue: record.roleValue
});
sto.sync();
//Now in your panel's initialize method:
var pstore = Ext.getStore('PanelDataStore');
pstore.load();
if(pstore.data.all[0].data.roleValue == 'unassigned'){
Ext.getCmp('roleValue').setDisabled(true);
}

Extjs 4 customized combobox layout bug

I am trying to customize the picker of the combobox to gridpanel.
I have an UI bug which I can't solve. When I put the combo inside fieldcontainer with layout of hbox and try to search , the picker pops up higher then it should be.
If I search second time - it miraculously pops up in correct position . After that the position is correct every time.
What is the problem and what can be done to fix the issue ?
This is the combo definition
Ext.define('NG.ux.form.field.GridComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.gridcombobox',
minChars: 3,
fieldLabel: 'Choose Search',
displayField: 'name',
valueField: 'id',
typeAhead: false,
anchor: '100%',
pageSize: 10,
autoSelect: false,
// copied from ComboBox
createPicker: function () {
var me = this,
picker,
pickerCfg = Ext.apply({
xtype: 'gridpanel',
pickerField: me,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
ownerCt: me,
store: me.store,
displayField: me.displayField,
focusOnToFront: false,
tpl: me.tpl
}, me.listConfig, me.defaultListConfig);
picker = me.picker = Ext.widget(pickerCfg);
me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});
me.mon(picker.getSelectionModel(), {
beforeselect: me.onBeforeSelect,
beforedeselect: me.onBeforeDeselect,
selectionchange: me.onListSelectionChange,
scope: me
});
return picker;
},
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
hideHeaders: true,
features: [
{
ftype: 'grouping',
groupHeaderTpl: '{name}',
collapsible: false
}],
height: 100,
columns: [
{
header: 'Name',
dataIndex: 'name',
flex: 1
}
]
},
initComponent: function () {
this.callParent(arguments);
}
});
And this is a layout definition
var states = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'category'],
data: [
{ "id": "AL", "name": "Alabama","category":"1" },
{ "id": "AK", "name": "Alaska", "category": "2" },
{ "id": "AZ", "name": "Arizona", "category": "2" }
]
});
Ext.define('NG.view.search.GeneralSearch', {
extend: 'Ext.form.Panel',
alias: 'widget.generalsearch',
store: states,
requires: [
'NG.ux.form.field.GridComboBox'
],
title: 'Search',
initComponent: function () {
this.createItems();
this.callParent(arguments);
},
createItems: function () {
this.items = [{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'gridcombobox',
store: states,
hideTrigger: true,
hideLabel: true,
listeners: {
scope: this,
select: function (arg1, arg2, arg3) {
this.fireEvent('select', arg1, arg2, arg3);
}
}
}, {
xtype: 'button',
text: 'one',
scale: 'small'
}, {
xtype: 'button',
text: 'two',
scale: 'small'
}]
}];
}
});
After upgrading from Ext 4.2.0 to Ext 4.2.1.883 the issue was solved

events for docked items in ext js

i am a noob in ext js and stuck with a problem.
i have created an app
this is the init function of my controller.
init: function () {
console.log('initialized filesystem controller');
this.control({
'filesystemtree': {
itemdblclick: this.OpenFile,
select: this.NodeSelected
},
'filesystemtree filesystemmenu button[text="Delete"]': {
click:this.DeleteButtonClicked
}
});
}
and this is the view with xtype : 'filesystemtree'
Ext.define('IDE.view.fileSystem.List', {
extend: 'Ext.tree.Panel',
alias: 'widget.filesystemtree',
title: 'Navigation2',
store: 'FileSystems',
rootVisible: 'false',
dockedItems: [{
xtype:'filesystemmenu',
dock:'top'
}],
initComponent: function () {
console.log('file system tree initializing');
this.callParent(arguments);
}
})
and this is the view with xtype:filesystemmenu docked to filesystemtree
Ext.define('IDE.view.fileSystem.FileSystemMenu', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.filesystemmenu',
items: [
{
xtype: 'splitbutton',
text: 'Menu',
menu: new Ext.menu.Menu({
items: [
{
text: 'Delete'
},
{
text: 'Copy'
},
{
text: 'Paste'
},
{
text: 'Cut'
},
{
name: 'Rename',
xtype: 'textfield',
emptyText: 'Enter text to rename'
}
]
})
},
{
text: 'Add Item',
id:'FSAddItemButton'
},
'->',
{
xtype: 'box',
id: 'fileSystemNodeNameLabel'
}
]
})
but in the controller im unable to attach a click event to the delete button present in the filesystemmenu which itself is present as a docked item to the filesystemtree.
basically this line in the controller aint working.
'filesystemtree filesystemmenu button[text="Delete"]': {
click:this.DeleteButtonClicked
}
what am i doing wrong?
Look at your selector. You're asking it to find a button with the text "Delete", however you don't have any component matching the criteria, because children of menus are Ext.menu.Item by default, so your selector should be:
'filesystemtree filesystemmenu menuitem[text="Delete"]'

Categories