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.
Related
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
My application is in MVC.
I have a grid with columns, and one of these columns has a with a renderer. This grid opens when the user clicks on an other grid.
When I load my application and I click to open this grid, this column (and the others after) don't load. But when I close and I re-open this grid, the columns are loaded.
I don't know where the problem is (moreover, this problem doesn't appear on the development server...)
I do a console.log(Ext.getStore('sTypesJours')) : I have some records
Then I do a console.log(Ext.getStore('sTypesJours').query('uid', val, false, false, true)) : I have no records the first time, but after re-open it works...
This is the code of my grid:
Ext.define('KGest.view.grille.Modif', {
extend: 'Ext.grid.Panel',
xtype: 'grillemodif',
title: 'Elements déjà saisis',
store: 'sGrilleModif',
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
itemId: 'toptoolbarService',
items: [
{
xtype: 'button',
id: 'save-button-grillemodif',
text: 'Sauver les modifications',
iconCls: 'x-icon-save',
action: 'update',
dock: 'top',
scope: this
}
]
}
],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columnLines: true,
viewConfig: {
deferEmptyText: false,
emptyText: 'Aucune donnée déjà saisie'
},
initComponent: function() {
var me = this;
me.selModel = Ext.create('Ext.selection.CheckboxModel', {
listeners: {
selectionchange: function(sm, selections) {
Ext.getCmp('validall-button-grillemodif').setDisabled(selections.length === 0);
Ext.getCmp('supprall-button-grillemodif').setDisabled(selections.length === 0);
}
},
injectCheckbox: 7 // position de la colonne des checkbox
});
Ext.apply(me, {
columns: [
{
text: 'Journée',
dataIndex: 'journee',
allowBlank: false,
xtype: 'datecolumn',
format: 'd/m/Y',
width: 100,
editor: {
xtype: 'datefield',
submitFormat: 'Y-m-d'
}
},
{
text: 'Type de jour',
dataIndex: 'uid_types_saisies',
flex: 1,
editor: {
xtype: 'combobox',
store: Ext.create('KGest.store.sTypesJours'),
valueField: 'uid',
displayField: 'libelle',
typeAhead: true,
queryMode: 'remote',
emptyText: 'Sélectionnez un type de jour',
listeners: {
beforequery: function(queryEvent, eOpts) {
var tabFilter = new Array();
tabFilter[0] = {"property": "uid_salaries", "value": Ext.getCmp('uid_salaries').getValue()};
queryEvent.combo.store.proxy.extraParams.filter = JSON.stringify(tabFilter);
}
}
},
renderer: function(val) {
if (val > 0) {
var srvStore = Ext.getStore('sTypesJours');
detail = srvStore.query('uid', val, false, false, true);
sortie = detail.getAt(0).data.code;
}
return sortie;
}
},
{
text: '1/2<br/>jour',
dataIndex: 'demi_jour',
xtype: 'checkcolumn',
width: 50
}
]
});
me.callParent(arguments);
}
});
Does anyone have any ideas?
Best I can offer (6 months after question asked) is this:
timing is everything, a field 'renderer' formats the cell-data at onload() time - meanwhile, instantiating and retrieving data to the store within the renderer function (when store-array is not-yet populated) returns undefined, by the time the next grid-load occurs, voila, there's the populated store, you get results from the query..
Probably solved this long ago, but load the store (autoload: true) or instantiate 'store' outside scope of grid-definition (before layout/renderer's are invoked)
Has anybody seen any sample of extjs grid with buffered scrolling with new row, row editing and row deletion support?
Can CellEditing and RowEditing plugins be used with Buffered Scrolling?
Is row editing even possible with buffered scrolling?
Cheers,
Avi
I had opened a thread at Ext forum and got the response, insertion and deletion is NOT supported with buffered scrolling.
http://forums.ext.net/showthread.php?27969-Buffered-Scrolling-with-Row-Editing-Deletion-Addition&p=124559&posted=1#post124559
Cheers,
Avi
I changed this example http://docs.sencha.com/extjs/4.2.2/#!/example/grid/infinite-scroll.html, added the row editor. Open this example: http://jsfiddle.net/zAnZg/1/, click on record, change values and then click "Update"
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
remoteGroup: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
leadingBufferZone: 300,
pageSize: 100,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function(store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function(store, operation) {
if (operation.groupers && operation.groupers.length) {
delete operation.sorters;
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 1,
autoCancel: false,
listeners:{
edit: function(editor, e){
Ext.MessageBox.alert(
'Just create Ajax recuest here. Post changed record:<br/>' +
Ext.JSON.encode(e.record.data)
);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
collapsible: true,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
features:[{
ftype: 'grouping',
hideGroupedHeader: false
}],
plugins: [rowEditing],
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
editor: {
allowBlank: false
}
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}],
renderTo: Ext.getBody()
});
});
I am using ExtJs 3.3.1.
Within an EditorGrid, my "editable" column has a ComboBox as its editor. How can I have the ComboBox always showing for each row? Meaning, the user would not have to click on a cell to know there is a ComboBox there. Currently, I have clicksToEdit set to 1, but I wish I could set this to 0 (I tried that).
See some of my code below to see my current configuration.
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'statusId',
'displayText'],
data: data
}),
valueField: 'statusId',
displayField: 'displayText'
});
var cm = new Ext.grid.ColumnModel({
columns: [{
id: 'orderId',
header: 'ID',
dataIndex: 'id',
width: 50
}, {
header: 'Status',
dataIndex: 'status',
width: 130,
editor: (data.length == 1) ? null : combo,
renderer: Ext.util.Format.comboRenderer(combo)
}, {
id: 'orderSummary',
header: 'Summary',
dataIndex: 'summary',
renderer: this.renderSummary
}]
});
var orderGrid = new Ext.grid.EditorGridPanel({
store: this.getOrderStore(),
cm: cm,
autoExpandColumn: 'orderSummary',
clicksToEdit: 1
});
Here is the solution I came up with.
In my column model, I made sure that the column I am making "editable" has an id. Each cell in that column will now have a CSS class associated with it named "x-grid-col-{id}". My column id is "status" so the class was "x-grid-col-status".
I created the CSS for class "x-grid-col-status" which sets the dropdown arrow image as the background, aligned right. It also sets the cursor to pointer, so the user knows they can click on the cell.
.x-grid3-col-status
{
background-image: url(Image/trigger-single.gif);
background-position: right;
background-repeat: no-repeat;
cursor: pointer;
}
Next, I set up a listener for my ComboBox that listens for the 'focus' event. On focus, I expand the drop down. It is important that I had to add lazyInit: false to my ComboBox config, or else an empty list will appear when you expand. lazyInit - true to not initialize the list for this combo until the field is focused (defaults to true)
The code:
Ext.util.Format.comboRenderer = function (combo) {
return function (value, metaData, record, rowIndex, colIndex, store) {
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyInit: false,
lazyRender: true,
mode: 'local',
editable: false,
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'statusId',
'displayText'
],
data: data
}),
valueField: 'statusId',
displayField: 'displayText',
listeners: {
'focus': {
fn: function (comboField) {
comboField.doQuery(comboField.allQuery, true);
comboField.expand();
}
, scope: this
}
, 'select': {
fn: function (comboField, record, index) {
comboField.fireEvent('blur');
}
, scope: this
}
}
});
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
id: 'orderId',
header: 'ID',
dataIndex: 'id',
width: 50
}, {
header: 'Status',
id: 'status',
dataIndex: 'status',
width: comboColumnWidth,
editor: combo,
renderer: Ext.util.Format.comboRenderer(combo)
}, {
id: 'orderSummary',
header: 'Summary',
dataIndex: 'summary',
renderer: this.renderSummary
}
]
});
var orderGrid = new Ext.grid.EditorGridPanel({
store: this.getOrderStore(),
cm: cm,
autoExpandColumn: 'orderSummary',
title: title,
clicksToEdit: 1
});
I think you'll need to add a special css to the combo box that displays the drop down icon. This is natively not supported by Ext JS. Here's an example of how it can be done:
var companyColumn = {
header: 'Company Name',
dataIndex: 'company',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
// provide the logic depending on business rules
// name of your own choosing to manipulate the cell depending upon
// the data in the underlying Record object.
if (value == 'whatever') {
//metaData.css : String : A CSS class name to add to the TD element of the cell.
//metaData.attr : String : An html attribute definition string to apply to
// the data container element within the table
// cell (e.g. 'style="color:red;"').
metaData.css = 'name-of-css-class-you-will-define';
}
return value;
}
}
Or you could use the Ext.grid.TemplateColumn and specify the tpl config. This will automatically generate a renderer for the cells in the column and apply the tpl.
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. :)