I have an EditorGridPanel which I show via a Ext.Window.
resourcesis the Json-data I get via an Ajax-call.
Example data: {"data":[{"id":"1","allowed":"1","roleId":"0","resource":"nothing"}]}
The problem is that the displayField of the ComboBox is only shown when I click on the ComboBox. When clicked, I get the choices: "allowed", "not allowed". When I remove focus the values get shown: "1", "0".
How can I show the displayField-values even when I have not clicked?
showRoleDetails: function(resources, roleId) {
var rolesData = resources;
var store = new Ext.data.JsonStore({
url: '/plugin/Registration/admin/get-acl-resources-of-role',
baseParams: { role: roleId},
storeId: 'myStore',
root: 'data',
fields: [
{name: 'allowed'},
{name: 'resource'}
]
});
store.load();
var grid = new Ext.grid.EditorGridPanel({
title: "Edit / View permissions for resources",
store: store,
autoHeight: true,
columns: [
{
header: 'Allowed',
dataIndex: 'allowed',
editor: new Ext.form.ComboBox({
triggerAction: 'all',
frame: true,
lazyRender:true,
editable: false,
mode: 'local',
value: 'allowed',
store: new Ext.data.JsonStore({
fields : ['allowed', 'allowedLabel'],
data :
[
{
allowed: '1',
allowedLabel: 'allowed'
},
{
allowed: '0',
allowedLabel: 'not allowed'
}
]
}),
valueField: 'allowed',
displayField: 'allowedLabel'
})
},
{
header: 'Resource',
dataIndex: 'resource'
}
]
});
var window = new Ext.Window({
items: grid
});
window.show();
}
Edit: Following Narendra Kamma's response, I edited my code as such:
var comboBox = new Ext.form.ComboBox({ //Combox values need to be filled up
triggerAction: 'all',
frame: true,
lazyRender:true,
editable: false,
mode: 'local',
value: 'allowed',
store: new Ext.data.JsonStore({
fields : ['allowed', 'allowedLabel'],
data :
[
{
allowed: '1',
allowedLabel: 'allowed'
},
{
allowed: '0',
allowedLabel: 'not allowed'
}
]
}),
valueField: 'allowed',
displayField: 'allowedLabel'
}) ;
var me = this;
var grid = new Ext.grid.EditorGridPanel({
title: "Edit / View permissions for resources",
store: store,
autoHeight: true,
columns: [
{
header: 'Allowed',
dataIndex: 'allowed',
editor: comboBox,
renderer: me.comboBoxRenderer(comboBox)
},
{
header: 'Resource',
dataIndex: 'resource'
}
]
});
This works wonderfully.
you should render the display value yourself. look for renderer option in grid column spec.
configure renderer
it will supply selected value, and related store record
you can return display value basing on your logic (accepts any value literally)
Related
I define a window include a form and some field and combo box. Example like
Ext.define('Ext.example.ABC', {
extend: 'Ext.window.Window',
items:{
xtype:'form',
items:[
{
xtype: 'combo',
id: 'example',
name: 'ax',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false,
fieldLabel: 'example',
mode: 'remote',
displayField:'name',
valueField: 'id',
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'id'},
{name: 'name'}
],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'example.php',
reader: {
type: 'json',
root: 'rows'
}
}
}
})
}]
}
,load: function(a) {
// do some thing
}
});
And I have a button in a grid panel
tbar:[
{
text:'create',
handler:function(){
var x = new Ext.example.ABC();
x.load(0);
}
}
But Why when i just start gridpanel then combo also load while I have not click button create.
I have many combo box and that make my grid panel load slowly :(
How can i fix that thanks
I guess you need set autoLoad: false config option for your combobox's store.
In relation to your comments - I've created an example. You can check it on jsFiddle.
It was created on ExtJs 3.4, but I think for 4.x it will be not very different.
var arrTestData = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State']
];
var combosCount = 5;
var arrItems = [];
for (var i = 0; i < combosCount; i++) {
var comboId = Ext.id();
// simple array store
var store = new Ext.data.ArrayStore({
parentCombo: comboId,
fields: ['abbr', 'state', 'nick'],
data : []
});
store.on('load', function() {
var combo = Ext.getCmp(this.parentCombo);
combo.setValue(combo.defaultValue);
});
var combo = new Ext.form.ComboBox({
id: comboId,
fieldLabel: 'Combobox #' + (i + 1),
store: store,
displayField:'state',
valueField:'abbr',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
defaultValue: arrTestData[i][0],
selectOnFocus:true
});
arrItems.push(combo);
}
var formPanel = new Ext.form.FormPanel({
bodyStyle: 'padding:5px;',
items: arrItems,
renderTo: 'combos-container'
});
new Ext.Button({
text: 'Do all cool things',
renderTo: 'combos-btn',
handler: function() {
var arrCombos = formPanel.findByType('combo');
Ext.each(arrCombos, function(combo){
combo.getStore().loadData(arrTestData);
});
}
});
So what we do there:
1. For each store we'll save parent combobox id - this is required to identify related combobox.
2. For each combobox we save own parameter - defaultValue. This is the value we want set as default after store will be loaded.
3. Listen for 'load' event and set default value for the combo.
I hope this is what you was waiting for :)
Have autoLoad:false and load your store manually for default values.
When you really want to load the store, you can do
store.load()
which will load your store for default values.
I need to load db values to a combo box. I can't figure out, why values are not loading into combo box. By firebug, console.log values are printed out. Here is my code for combo box,
var groups = new Ext.data.JsonStore({
fields: [{
id: 'id'
}, {
name: 'name'
}],
root: 'rows',
autoDestroy: true,
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: GO.settings.modules.schedule.url + 'groups.php',
}),
reader: {
type: 'json',
root: 'rows'
},
listeners: {
load: function (obj, records) {
Ext.each(records, function (rec) {
console.log(rec.get('name'));
});
}
}
});
var taskGroup = new Ext.form.ComboBox({
name: 'Group',
hiddenName: 'group',
triggerAction: 'all',
editable: false,
fieldLabel: 'Group',
mode: 'local',
autoLoad: true,
displayField: 'text',
store: groups,
columns: [{
dataIndex: 'name'
}],
});
You've set the displayField, but you also need the valueField:
valueField: 'id'
Using the example in "ext-designer-for-ext-js-4-users-guide.pdf" i've put together the following. The issue is that the store is not binding. ie the select is empty.
MyComboBox.js
Ext.define('MyApp.view.MyComboBox', {
extend: 'MyApp.view.ui.MyComboBox',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
Ext.define('MyApp.view.ui.MyComboBox', {
extend: 'Ext.form.field.ComboBox',
fieldLabel: 'comboList',
displayField: 'comboList',
queryMode: 'local',
store: 'MyArrayStore',
triggerAction: 'all',
valueField: 'comboList',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
store/MyArrayStore.js
Ext.define('MyApp.store.MyArrayStore', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyArrayStore',
data: [
[
'Search Engine'
],
[
'Online Ad'
],
[
'Facebook'
]
],
proxy: {
type: 'ajax',
reader: {
type: 'array'
}
},
fields: [
{
name: 'comboList'
}
]
}, cfg)]);
}
});
** update **
this was driving me crazy. It's [turns out][1] my array need to be json format. When i updated it to
[{"comboList" : "Hello"}, {"comboList" : "Hi"}, {"comboList" : "GoodMorning"}]
it worked.
I started to try and pick apart your implementation but it seems somewhat convoluted, starting with the store where there is local data and a proxy defined but no url for the proxy.
It seemed easier to just give you a simplified implementation of a combobox (using local data because it seems that is what you are trying to do):
// the datastore
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data: [
{value: 1, name: 'Search Engine'},
{value: 2, name: 'Online Ad'},
{value: 3, name: 'Facebook'}
]
});
// a window to hold the combobox inside of a form
myWindow = Ext.create('Ext.Window', {
title: 'A Simple Window',
width: 300,
constrain: true,
modal: true,
layout: 'fit',
items: [{
// the form to hold the combobox
xtype: 'form',
border: false,
fieldDefaults: {
labelWidth: 75
},
bodyPadding: '15 10 10 10',
items: [{
// the combobox
xtype: 'combo',
id: 'myCombo',
fieldLabel: 'Title',
valueField: 'value',
displayField: 'name',
store: myStore,
queryMode: 'local',
typeAhead: true,
forceSelection: true,
allowBlank: false,
anchor: '100%'
},{
// shows the selected value when pressed
xtype: 'button',
margin: '10 0 0 100',
text: 'OK',
handler: function() {
alert('Name: ' + Ext.getCmp('myCombo').getRawValue() +
'\nValue: ' + Ext.getCmp('myCombo').value);
}
}]
}]
});
// show the window
myWindow.show();
This creates a combobox inside of a little window with an OK button. When you press OK it will alert the visible text of the combobox Ext.getCmp('myCombo').getRawValue() and the value of the item in the combobox Ext.getCmp('myCombo').value.
If you drop this in your project you can get an idea of how it implements, it should just run.
If you actually wanted a remote datastore (from a webservice that returns json for example) you would just need to change the datastore configuration like so:
var myRemoteStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
proxy: {
type: 'ajax',
url: 'myWebservice.php', // whatever your webservice path is
reader: 'json',
},
autoLoad:true
});
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.
I'm getting an error when selecting cells in my EditorGridPanel. Here's a snippet of my code:
var bannerGrid = new Ext.grid.EditorGridPanel({
store: bannerStore,
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true,
menuDisabled: true
},
columns:
{
header: '<img src="img/oo-icon.png" /> <img src="img/network-icon.png" />',
width: 52,
dataIndex: 'inventory',
align: 'center',
renderer: inventoryIcon,
}, {
header: "Name",
dataIndex: 'bannerName',
editor: new Ext.form.TextField({ allowBlank: false }),
width: 300
}, {
header: "Advertiser",
dataIndex: 'advertiser',
editor: advertisersDropdownGrid,
}, {
header: "Art Type",
dataIndex: 'artType',
editor: artTypeDropdownGrid,
}, {
......
Each of the 'editors' are dropdowns that are defined prior to the grid. The weird thing is that the editor that contains the TextField does not throw the same error.
The error I'm getting when selecting a cell is this:
c.getItemCt() is undefined
[Break On This Error] c.getItemCt().removeClass('x-hide-' + c.hideMode);
Again, this only happens on the ComboBox editors!
From further inspection the error is coming from this part of ext itself:
onFieldShow: function(c){
c.getItemCt().removeClass('x-hide-' + c.hideMode);
if (c.isComposite) {
c.doLayout();
}
},
Which seems to be part of the FormLayout section.
Any ideas? I've tried defining the Combo's inline and that did not fix it.
Thanks!
EDIT: Here's how I define my Combo's using classes.
I define my ComboBoxJSON class: (I've blanked out namespaces just for privacy sake)
***.***.***.ComboBoxJSON = Ext.extend(Ext.form.ComboBox, {
url: '',
root: '',
valueField: 'id',
displayField: 'name',
width: 200,
id: '',
fields: [
{ name: 'id', type: 'int'},
{ name: 'name', type: 'string' }
],
initComponent: function () {
var comboStore = new Ext.data.JsonStore({
id: 'JsonStore',
idProperty: 'id',
autoLoad: true,
idProperty: 'id',
root: this.root,
fields: this.fields,
proxy: new Ext.data.ScriptTagProxy({
api: {
read: this.url,
}
})
});
var config = {
store: comboStore,
displayField: this.displayField,
valueField: this.valueField,
mode: 'local',
minChars: 1,
triggerAction: 'all',
typeAhead: true,
lazyRender: true,
value: this.value,
width: this.width,
id: this.id
}
Ext.apply(this, config);
***.***.***.ComboBoxJSON.superclass.initComponent(this);
}
});
Ext.reg("ibwComboJson", ***.***.***.ComboBoxJSON);
I then define my combos before init on the grid, like so: (I've blocked out the URL, but it does return valid JSON)
var advertisersDropdownGrid = new ***.***.***.ComboBoxJSON({
url: '***',
root: 'advertiserList',
id: 'advertisersDropdownGrid'
});
Found the answer to this awhile back, but the solution is pretty absurdly simple.
***.***.***.ComboBoxJSON.superclass.initComponent.call(this);
Forgot the .call portion. :)