I have grid which have dynamic column. When the user clicks on this column, it display list of values from that the store returns.Once they user select any value, I would like the displayfield to show the valueand not the numeric id(key) of that value.
.....................
......................
plugins : [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
pluginId: 'Editor',
listeners : {
delay:1,
scope: this
}
})
],
doAfterFilterRendered : function() {
for (var i = 0; i <Ext.getCmp('ReportGrid').gridColumns.length; i++) {
if (ColumnGridType == 'COMBOBOX')// base on some condition i m trying to create combo box
{
Ext.getCmp('ReportGrid').gridColumns[i].editor= {
xtype: 'combobox',
forceSelection: true,
id : 'idCombo'
editable: false,
triggerAction: 'all',
allowBlank: false,
store: me.getColumnStoreList("Country")// which return 2 dimentional array with key value
}
}
}
Ext.getCmp('ReportGrid').getStore().load();
Ext.getCmp('ReportGrid').reconfigure(Ext.getCmp('ReportGrid').store, Ext.getCmp('ReportGrid').gridColumns);
},
......................
........................
I tried following thing to display value instead of key.
doAfterFilterRendered : function() {
for (var i = 0; i <Ext.getCmp('ReportGrid').gridColumns.length; i++) {
if (ColumnGridType == 'COMBOBOX')// base on some condition i m trying to create combo box
{
Ext.getCmp('ReportGrid').gridColumns[i].editor= {
xtype: 'combobox',
forceSelection: true,
id : 'idCombo'
editable: false,
triggerAction: 'all',
allowBlank: false,
store: me.getColumnStoreList("Country") // which return 2 dimentional array with key value,
**fields: ['key', 'value']}),
valueField: 'key',
displayField: 'value',**
}
}
}
You need to add a renderer in your column grid:
Something like that
renderer: function(val){
index = me.getColumnStoreList("Country").findExact('key',val);
if (index != -1){
rs = me.getColumnStoreList("Country").getAt(index).data;
return rs.value;
}
},
Source: Extjs4 combobox displayValue in grid
Related
There are two fields in the grid:
...
{
text: 'Спец. учетка',
sortable: true,
dataIndex: 'specuserName',
flex: 2,
editor: {
xtype: 'combobox',
store: 'Vendors',
displayField: 'name',
valueField: 'name',
//editable: false,
queryMode: 'remote',
//forceSelection: true,
triggerAction: 'all',
allowBlank: true
}
},
{
header: 'Сотрудники группы',
dataIndex: 'users',
flex:2,
editor: {
xtype: 'tagfield',
typeAhead: true,
queryMode: 'remote',
filterPickList: true,
triggerOnClick: true,
displayField: 'name',
valueField: 'name',
triggerAction: 'all',
store: 'IntraUsers',
}
},
...
ViewController looks like that:
Ext.define('App.view.MainIntranetController', {
extend: 'Ext.app.ViewController',
alias: 'controller.intranetcontainer',
onGridEditorIntraEdit: function (editor, ctx, eOpts) {
//combobox
var vendorColIdx = 2;
var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var vendorRecord = combo.findRecord('name', combo.getValue());
console.log(vendorRecord);
ctx.record.set('specuserId', vendorRecord.get('id'));
//tagfield
var vendorColIdx = 3;
var tagfields = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var valuetag = tagfields.getValue();
//ctx.record.set('mainusersId', vendorRecord.get('id'));
//ctx.record.set(valuetag);
//console.log(ctx.record);
//ctx.grid.getStore().sync();
}
});
First I get the id of the selected combobox values and set it to send to the server, and then I try to get the id of the selected tagfields values to send them to the server, but I don’t get it right.
How to make the id of the selected values with tagfield go to the server.
Thanks.
Since setting the tagfield's displayField to "name" prevents getting the array of selected record ids, another way to achieve this is by using tagfield's getValueRecords method. We can pass the result of this method to the Array's map function and gather only the ids:
var tagfieldSeletedIds = Ext.Array.map(tagfield.getValueRecords(), function(record) {
return record.getId()
});
I have one dynamic ExtJS grid.
items: {
xtype: 'grid',
border: false,
columnLines: true,
scrollable: true,
stripeRows: true,
columns: changeColumns,
store: store1 /// How to change store here
},
and store 1 is some thing like
store1 = Ext.create('Ext.data.Store', {
fields: Fields1,
data: Data1
});
and store 1 is some thing like
store2 = Ext.create('Ext.data.Store', {
fields: Fields1,
data: Data2
});
So I want to change my store on basis of some condition given below.
Now my condition is
if(headersXmlDoc.getAttribute("ST") == 1){
Store1
}else if(headersXmlDoc.getAttribute("ST") == 2){
Store2
}
Can any body tell me how to achive this.
You will need to use the grid's reconfigure method.
Example: https://fiddle.sencha.com/#view/editor&fiddle/1pdi
I have a check column on a grid that I need to programatically check mark.
Here is how the check column is scripted:
columns: {
items:[
{
itemId: 'checkColumn',
xtype: 'selectallcheckcolumn',
cls: 'select-all-check-column',
dataIndex: 'Checked',
hideable: false
},
var grid = Ext.ComponentQuery.query('grid[itemId=gridID]')[0];
var view = grid.getView();
var record = view.getRecord({0});
var active = record.get('active');
record.set('active', !active);
I want to add some filters to my grid when I clicked on the filter button (see below).The filters must be add tot the grid with the given values from the filterpanel form.
On this page the textfield will be filled in and when I clicked on the filter button the onFilterClick handler will trigger the FilterController.
Ext.define('path.to.filterPanel', {
extend: 'Ext.form.Panel',
xtype: 'filter',
controller: 'dashboard-filter',
viewModel: {
type: 'dashboard-filter'
},
frame: false,
bodyPadding: 10,
layout: 'form',
// the fields
items: [{
xtype: 'textfield',
name: 'firstName',
id: 'firstName',
fieldLabel: 'Firstname'
}, {
xtype: 'textfield',
name: 'lastName',
id: 'lastName',
fieldLabel: 'Lastname'
}],
buttons: [
text : 'Filter',
handler: 'onFilterClick' // trigger to the controller
}]
});
When clicked on the Filterbutton the values will be pust to this controller.
Ext.define('path.to.FilterController', {
extend: 'Ext.app.ViewController',
alias: 'controller.dashboard-filter',
onFilterClick: function(button) {
var form = button.up('form').getForm();
if (form.isValid()) {
// form valid
var firstName = Ext.getCmp("firstName").getValue();
var lastName = Ext.getCmp("lastName").getValue();
// check if there is some input
if (!!employeeNumber || !!firstName || !!lastName) {
// add filters but how??
}
} else {
// form not valid
console.log("not valid");
}
}
});
Finally this is the grid file where the filters must be added.
Ext.define('path.to.gridPanel, {
extend: 'Ext.grid.Panel',
requires: [
'Ext.grid.column.Action',
'App.store.Employees'
],
controller: 'dashboard-gridVieuw',
xtype: 'gridVieuw',
store: 'Employees',
stateful: true,
collapsible: true,
multiSelect: true,
stateId: 'gridController',
initComponent: function () {
this.store = new App.store.Employees();
var me = this;
me.columns = [{
header : 'Firstname',
flex : 1,
sortable : true,
dataIndex: 'firstName'
}, {
header : 'Lastname',
flex : 1,
sortable : true,
dataIndex: 'lastName'
}]
me.callParent();
}
});
I use version 5 of extjs.
You can use filterBy method to filter the underlying store associated with the grid. Here is an example:
Ext.getStore('myStore').filterBy(function(record, id) {
if (record.get('firstName') === firstName) {
return true;
} else {
return false;
}
});
Here is a fiddle demonstrating a working example of a filter
Thanks for answering my question. It works for me. I've added the follow OnClick handler in the controller.
onFilterClick: function(button) {
var form = button.up('form').getForm();
if (form.isValid()) {
var fieldOne = Ext.getCmp("fieldOne").getValue();
var fieldTwo = Ext.getCmp("fieldTwo").getValue();
// check if there is some input
if (!!fieldOne || !!fieldTwo) {
// get store
var store = Ext.data.StoreManager.lookup('store');
// check if store not empty
if(!Ext.isEmpty(store)){
// clear filters and add a few new filters if params not empty
store.clearFilter(true);
if (!Ext.isEmpty(fieldOne)) {
store.filter("fieldOne", fieldOne)
}
if (!Ext.isEmpty(fieldTwo)) {
store.filter("fieldTwo", fieldTwo)
}
// count the filtered rows
var count = store.snapshot ? store.snapshot.length : store.getCount();
if (count == 0) {
alert("No data found!");
store.clearFilter();
}
} else{
//Store empty
console.warn("Store's empty");
}
} else {
// no values
alert("No entered data!");
}
} else {
// form not valid
alert("Form not valid!");
}
}
I have the following code in a grid:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Job ID',
width : 75,
sortable : true,
dataIndex: 'id'
},
{
text : 'File Name',
width : 75,
sortable : true,
dataIndex: 'filename',
listeners : {
'mouseover' : function(iView, iCellEl,
iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
var zRec = iView.getRecord(iRowEl);
alert(zRec.data.id);
}
}
...etc...
I can't figure out how to get the cell value of the first column in the row. I've also tried:
var record = grid.getStore().getAt(iRowIdx); // Get the Record
alert(iView.getRecord().get('id'));
Any ideas?
Thanks in advance!
It's easier than what you have.
Look at the Company column config here for an example-
http://jsfiddle.net/qr2BJ/4580/
Edit:
Part of grid definition code:
....
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
renderer : function (value, metaData, record, row, col, store, gridView) {
metaData.tdAttr = 'data-qtip="' + record.get('price') + ' is the price of ' + value + '"';
return value;
}
},
....
You can add a handler instead of a listener.
{
header: 'DETAILS',
xtype:'actioncolumn',
align:'center',
width: 70,
sortable: false,
items: [
{
icon: '/icons/details_icon.png', // Use a URL in the icon config
tooltip: 'Show Details',
handler: function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
}