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()
});
Related
I'm facing issue of firing edit event using cell editor in Ext Js 3.4.
I'm trying to achieve triggering an ajax call upon a cell edited after pressing 'Enter'.
For now, I just replaced with console.log('hi') but it doesn't show anything after I pressed 'Enter'.
I'm not sure what's wrong in my code. Appreciate if someone can point it out. Thanks.
var grid = new Ext.grid.EditorGridPanel({
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false,
listener: {
edit: function (el) {
console.log('hi');
}
}
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
Solution:
Use EditorGridPanel afteredit event:
afteredit(e)
Fires after a cell is edited. The edit event object has the following
properties
grid - This grid
record - The record being edited
field - The field name being edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid row index
column - The grid column index
Parameters:
e : Object An edit event (see above for description)
Example:
Ext.onReady(function () {
var api_store = new Ext.data.ArrayStore({
fields: ['key', 'name'],
data: [
['1', 'Name1'],
['2', 'Name2'],
['3', 'Name3']
]
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
listeners: {
afteredit: function(e) {
console.log('After edit. Column: ' + e.field);
}
},
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
});
I'm working on an ExtJS 6.2 project. I need to perform some operations when the columns in a grid a resized. I think the correct event to do so is columnresize. The problem is, since the columns are being loaded from a database dynamically, this event is fired every time a new column is added to the grid, and I would like to prevent it. I mean, I need this event to be fired only when every column is loaded.
I've tried to set a flag (named lFirstInit) that would be false once the columns are loaded form database, but the columnresize event keeps on being fired from the start.
How could I approach this, please? Thanks.
View:
Ext.define('App.view.TMainBrowseGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.TMainBrowseGrid',
requires: [
'App.view.TMainBrowseGridViewModel',
'App.view.override.TMainBrowseGrid',
'Ext.view.Table',
'Ext.grid.column.RowNumberer',
'App.view.TMainBrowseGridViewController'
],
controller: 'TMainBrowseGrid',
config: {
oParent: null,
cBrwName: '',
cCodForm: ''
},
viewModel: {
type: 'TMainBrowseGrid'
},
flex: 1,
columns: [
{
xtype: 'rownumberer',
itemId: 'oColRowNum'
}
],
listeners: {
columnresize: 'onGridpanelColumnResize',
}
});
Controller
Ext.define('App.view.TMainBrowseGridViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.TMainBrowseGrid',
onGridpanelColumnResize: function (component, column, width, eOpts) {
// THINGS TO DO...
}
});
We have finally discarded the 'columnresize' approach. We thought it is more reliable performing thos operations when clicking on a 'Close' button. However, I would like to thank you for your suggestions, especially the person who posted the answer below, and later removed it before I could mark it as the chosen answer. This was the code he/she posted:
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'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
listeners: {
columnresize: function(ct, column, width, eOpts){
if(ct.containsFocus){// It will true when we resize column.
alert('resize');
console.log(`${column.text} Column resized`);
}
}
}
});
I have a grid with a combobox in one of the columns which works on first load but when i edit the value of the store for the cell and when i do this
onComboOptionsChange: function (combo, newValue, oldValue, eOpts) {
record.set("Unit", 1);
record.commit();
}
the grid does not show the combo box anymore.
{
header: 'Options',
dataIndex: 'StoreName',
flex: 1,
xtype: 'widgetcolumn',
widget:
{
xtype: 'combobox',
displayField: 'Description',
valueField: 'LineID',
listeners: {
change: 'onComboOptionsChange'
}
},
listeners:{
afterrender:'afterWidgetRender'
},
onWidgetAttach: function (column, widget, record) {
var itemStore = Ext.create('Ext.data.Store', {
fields: [
{ name: 'LineID', type: 'int' },
{ name: 'ServiceCode', type: 'string' },
],
data: record.data.Items
});
widget.setStore(itemStore);
},
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);
}
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