I have tree panel, that has the cell editing plugin:
plugins = {
ptype: 'cellediting',
clicksToEdit: 1
};
And I want to achieve the following scenario: if there is a single click on a node, the editor should be a combobox, if double click - editor should be a textfield. How can I implement this?
This is my function from the controller:
getEditor: function (record) {
if (dblclick) {
Ext.create('Ext.grid.CellEditor', {
field: Ext.widget('combo', {
editable: false,
allowBlank: false,
flex: 1,
queryMode: 'local',
store: App.store.Goods,
displayField: 'name',
valueField: 'id'
})
});
};
if (singleClick) {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.widget('textfield', {
selectOnFocus: true,
maxLength: 20,
enforceMaxLength: true
})
});
}
return;
},
Related
Current state: The combobox display by default a 0
Goal: I want to display "24/7" which is an option that appears inside its list if clicked.
Here is my combobox:
{
xtype: "combobox",
name: "horario",
reference: "horarioCombo",
queryMode: "local",
label: i18n.t(
"OSAccess.view.usuarios.tabs.configDefault.field.horario",
"Horarios por defecto"
),
bind: {
hidden:
"{!settingsGlobal.configuracion.sistemaSmartpass}",
value: "{usuario.horarioId}",
required:
"{!isCreate && settingsGlobal.configuracion.sistemaSmartpass}"
},
displayField: "descripcion",
valueField: "id",
flex: 2,
publishes: {
selection: true
},
hidden: true,
store: {
type: "horarios",
autoLoad: true
}
}
I'm trying to get the value of a cell in a grid using below. In-fact I'm just trying to print it in the console
console.log(Ext.ComponentQuery.query('gridcolumn[itemId=gridId]')[0].getEditor().getStore().findRecord('description', 'Description'));
Grid Code
Ext.define('Examples.grid.fdGrid', {
extend: 'Ext.grid.Panel',
xtype: foodGrid',
forceNewStore: true,
itemId: 'foodGrid',
height: Ext.getBody().getViewSize().height - 200,
autoload: false,
columns: [
{
text: 'Food Distrib',
xtype: 'gridcolumn',
itemId:'gridId',
dataIndex: 'food_distributor',
flex: 1,
renderer: function(value){
if(Ext.isNumber(value)){
var store = this.getEditor().getStore();
return store.findRecord('foodid',value).get('description');
}
return value;
},
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "description",
valueField: "foodid",
listeners: {
expand: function () {
var call = this.up('foodgrid[itemId=foodGrid]').getSelectionModel().selection.record.data.networkname.trim();
this.store.clearFilter();
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
},
},
}
});
But i'm getting an error as Uncaught TypeError: Cannot read property 'getEditor' of undefined
What's the error please?
Added the Grid Code part, and the column whose value I want to print.
The editor is created when needed (when the first edit occurs). So when the renderer is first called, the editor is not yet available.
What you want to do from inside your renderer, is to directly access the store, not go through the editor. Then you only need a pre-loaded store to be able to render the grid correctly.
renderer: function(value){
if(Ext.isNumber(value)){
var store =Ext.getStore("MyStore");
return store.findRecord('foodid',value).get('description');
}
return value;
},
editor: {
xtype:'combobox',
store:'MyStore'
Of course, you have to make sure that MyStore is loaded before you render the grid.
One can only guess what you are trying to do there but:
Column doesn't have a selection model of itself. Grid does.
Combobox needs a store.
getEditor may return String OR Object if an editor was set and column is editable
editable is provided by a grid plugin. In other words, specifying a column as being editable and specifying a column editor will not be enough, you also need to provide the grid with the editable plugin.
Some working example:
Ext.define('Examples.grid.fdGrid', {
extend: 'Ext.grid.Panel',
xtype: 'feedGrid',
forceNewStore: true,
itemId: 'foodGrid',
height: Ext.getBody().getViewSize().height - 200,
autoload: false,
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [
{
text: 'Food Distrib',
xtype: 'gridcolumn',
itemId:'gridId',
dataIndex: 'food_distributor',
flex: 1,
editable: true,
renderer: function(value){
if(Ext.isNumber(value)){
var store = this.getEditor().getStore();
return store.findRecord('foodid',value).get('description');
}
return value;
},
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "description",
valueField: "foodid",
store: {
fields:['food_distributor', 'description'],
data:[
{
'food_distributor':'a',
foodid:1,
description:'aaaaa'
},
{
'food_distributor':'a',
foodid:2,
description:'bbbbbb'
},
{
'food_distributor':'a',
foodid:3,
description:'aaaaa'
}]
},
listeners: {
expand: function () {
debugger;
var desc = this.up('grid').getSelectionModel().getSelection()[0].get('description').trim();
this.store.clearFilter();
this.store.filter({
property: 'description',
value: desc,
exactMatch: true
})
}
},
},
}
]
});
Ext.create('Examples.grid.fdGrid', {
store: {
fields:['food_distributor', 'description'],
data:[
{
'food_distributor':'a',
foodid:1,
description:'aaaaa'
},
{
'food_distributor':'a',
foodid:2,
description:'bbbbbb'
},
{
'food_distributor':'a',
foodid:3,
description:'aaaaa'
}]
},
renderTo:Ext.getBody()
})
Do you have
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
Without the plugin the editor doesnt work! and the editor will be undefined when you will try to obtain it
I am using combobox in my application, it allows me to select the value only single time, when I want to change my selection it does not allow me to select value again. It just open an and goes back. How to resolve this.
Code:
{
xtype:'combobox',
style:'margin:10px;',
fieldLabel: 'M Group(*)',
editable:false,
bodyStyle:'padding-left:10px;',
store: GroupStore,
valueField:'value',
displayField:'name',
multiSelect: false,
name: 'GroupId',
id:'MGroupId',
queryMode: 'local',
triggerAction: 'all',
//disabled:true,
emptyText:'Select Group',
listeners: {
expand : function(field, eOpts)
{
if(isFirst) {
inputJson.Unit.id = Id;
this.getStore().load({
params: {jsonData: Ext.encode(inputJson)}
});
Ext.getCmp('MGroupId').setDisabled(false);
Ext.getCmp('MGroupId').setVisible(true);
}else{
Ext.getCmp('MGroupId').setDisabled(true);
Ext.getCmp('MGroupId').setVisible(false);
}
},
select: function(combo, record, index) {
this.getStore().each(function(r){
if(combo.getValue() == r.data['value'])
{
MGroupName = r.data['name'];
}
});
}
I have 2 combobox, when i click on second combobox the loading appears and it remain there till I click on list item. I dont want loading to appear on second combo.
I have 2 combobox, when i click on second combobox the loading appears and it remain there till I click on list item. I dont want loading to appear on second combo.
var UnitPanel = Ext.create('Ext.panel.Panel', {
itemId:'dsUnitPanel',
border:0,
items:[UnitGrid,{
xtype:'combobox',
tpl: '<tpl for="."><div class="x-boundlist-item" >{name} [{freeSize} GB Free] </div></tpl>',
style:'margin:10px;',
fieldLabel: 'A Group(*)',
editable:false,
bodyStyle:'padding-left:10px;',
store: dsAStore,
valueField:'name',
displayField:'name',
//forceSelection: true,
multiSelect: false,
name: 'txtMode',
id:'dsVolumeGroupId',
queryMode: 'local',
triggerAction: 'all',
emptyText:'Select A Group',
listeners: {
select: function(combo, record, index) {
this.getStore().each(function(r){
if(combo.getValue() == r.data['name'])
{
selectedDsVg = combo.getValue();
selectedDsVgFreeSize = r.data['freeSize'];
}
});
} ,
'focus':function()
{
if(selectedDsWizardIndex == null)
{
Ext.MessageBox.alert('Error', 'Please select at least one Array',function(){
enableTabIndexing();
});
}
}
}
},
{
xtype:'combobox',
style:'margin:10px;',
fieldLabel: 'B Group(*)',
editable:false,
bodyStyle:'padding-left:10px;',
loadMask: false,
store: BGroupStore,
valueField:'value',
displayField:'name',
multiSelect: false,
name: 'dsBGroupId',
id:'dsBGroupId',
queryMode: 'local',
triggerAction: 'all',
//disabled:true,
emptyText:'Select B Group',
listeners: {
select: function(combo, record, index) {
//store.on('load', function () { this.getPicker().setLoading(false); }, this);
this.getStore().loadMask.hide();
this.getStore().each(function(r){
if(combo.getValue() == r.data['value'])
{
alert('Select');
bGroupName = r.data['name'];
}
});
},
'focus':function()
{
if(selectedDsWizardIndex == null)
{
Ext.MessageBox.alert('Error', 'Please select at least one',function(){
enableTabIndexing();
});
}
}
}
}
Please suggest.
You should define a listConfig like:
listConfig: {
loadingText: null,
loadMask: false
}
I am trying to edit an information using editor grid. I have three fields, Interview By (combo), Date (date) and Performance (number), I get the date and the performance column, but the combo is not displaying the value initially. But when I click, then it shows the correct value. I am new to extjs and googled it for a solution, but could not find it. Kindly help me with a solution. Thanks in advance.
MY CODE:
initComponent: function() {
this.createTbar();
this.columns = [
{ xtype:'numbercolumn',
hidden:true,
dataIndex:'interview_id',
hideable:false
},
{ xtype: 'gridcolumn',
dataIndex: 'interview_by_employee_id',
header: 'Interview By',
sortable: true,
width: 290,
editor: {
xtype: 'combo',
store: employee_store,
displayField:'employee_first_name',
valueField: 'employee_id',
hiddenName: 'employee_first_name',
hiddenValue: 'employee_id',
mode: 'remote',
triggerAction: 'all',
forceSelection: true,
allowBlank: false ,
editable: false,
listClass : 'x-combo-list-small',
style: 'font:normal 11px tahoma, arial, helvetica, sans-serif'
},
renderer: function(val){
index = employee_store.findExact('employee_id',val);
if (index != -1){
rs = employee_store.getAt(index).data;
return rs.employee_first_name;
}
}
},
{ xtype: 'gridcolumn',
dataIndex: 'interview_date',
header: 'Date',
sortable: true,
readOnly: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{ xtype: 'numbercolumn',
header: 'Performance',
format:'0',
sortable: true,
width: 100,
align: 'right',
dataIndex: 'interview_performance',
editor: {
xtype: 'numberfield'
}
}
];
candidate_grid_interview.superclass.initComponent.call(this);
}
and the screen shots,
I faced the same problem and found my solution somewhere. Here is a reduced version of what I'm using. I think the key was the renderer property on the column. If your combo uses remote data, it might be loading its content after the grid is done loading - but I'm not sure it will cause the problem you're describing.
Try this concept:
var myStore = new Ext.data.JsonStore({
autoLoad: false,
...
fields: [
{ name: 'myID', type: 'int' },
{ name: 'myName', type: 'string' }
],
listeners: {
load: function () {
// Load my grid data.
},
scope: this
}
});
var myCombo = new Ext.form.ComboBox({
...
displayField: 'myName',
valueField: 'myID',
store: myStore
});
var grid = new Ext.grid.EditorGridPanel({
store: new Ext.data.ArrayStore({
...
fields: [
...
{ name: 'myID', type: 'int' },
...
]
}),
...
cm: new Ext.grid.ColumnModel({
columns: [
...
{
header: 'Header',
dataIndex: 'myID',
editor: myCombo,
renderer: function (value) {
var record = myCombo.findRecord(myCombo.valueField, value);
return record ? record.get(myCombo.displayField) : myCombo.valueNotFoundText;
}
}]
})
});
myStore.load();
Store loading is asynchronous, so it might be loading itself after rendering the grid. I recommend you render your grid within the store onload event. Also, datatypes can be painfull if you don't pay enough attention. Be sure that your grid store and combo store types match.