I have a table in my database which contains a list of Countries and their respective country codes as shown below:
country country code
------- -------------
Canada CA
Russia RU
USA US
China CN
France FR
When I select the country from the combobox I would like the textfield in the form to populate its respective country code. Does anyone know how this can be accomplished?
My combobox is defined as below:
{
xtype: 'combobox',
labelAlign: 'top',
fieldLabel: 'Country',
id: 'CountrySelectField',
name: 'country_id',
store: 'Country',
displayField: 'name',
valueField: 'id',
width: 300,
allowBlank:false,
}
You could try using the records argument to select event
listeners : {
select :function (combo, records, index, eOpts ){
Ext.getCmp('textbox').setValue(records[0].get('country_code'))
}
}
You should be able to add a listener to your combobox that sets the value of your textfield like this :
listeners : {
select :function (combo, records, index, eOpts ){
Ext.getCmp('myTextBox').setValue(combo.value);
}
}
Related
I am trying to create an editable grid where I can add TransactionItems. Each TransactionItem will have a product (combobox), rate (textbox), quantity(textbox), total(textbox) and IsTaxable(checkbox) field. When I select Product, I want to update Rate and IsTaxable field on the same row for that product as well. How?
var productElem;
var productDDL;
ej.grids.Grid.Inject(ej.grids.Edit, ej.grids.Toolbar);
var grid = new ej.grids.Grid({
dataSource: [],
toolbar: ['Add', 'Cancel'],
editSettings: { showConfirmDialog: true, showDeleteConfirmDialog: true,allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
columns: [
{
field: 'Product', headerText: 'Product',
type: 'string',
foreignKeyField: "ProductId",
foreignKeyValue: "Product",
edit: {
create: function () {
productElem = document.createElement('input');
return productElem;
},
read: function () {
return productDDL.text;
},
destroy: function (e) {
productDDL.destroy();
},
write: function (args) {
productDDL = new ej.dropdowns.ComboBox({
fields: { text: 'product', value: 'product' },
placeholder: "Select a Product",
allowFiltering: true,
filtering: (e) => {
if (!e.text || e.text.length < 3) { return; }
else {
var query = new ej.data.Query().addParams("searchText",e.text.trim());
e.updateData(productDDLSource, query);
}
},
change: (item) => {
// HERE I want to update value of Rate and IsTaxable based on Product selected
}
});
productDDL.appendTo(productElem);
},
}
},
{ field: 'Rate', headerText: 'Rate', type: 'number' },
{ field: 'Quantity', headerText: 'Quantity', type: 'number' },
{ field: 'Total', headerText: 'Total', type: 'number' },
{ field: 'IsTaxable', headerText: 'Is Taxable', type: 'checkbox' }
],
height: 315
});
grid.appendTo('#grid');
We checked attached sample and we suspect that you have performed the Batch editing with ForeignKey column.
In your code example we found that, you have not defined the column.isPrimaryKey property in the unique Grid column which is required to perform the CRUD action.
Please refer the below documentation for more information
Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/column/#isprimarykey
https://ej2.syncfusion.com/documentation/grid/edit/#editing
Query: When I select Product, I want to update Rate and IsTaxable field on the same row for that product as well. How?
Based on your query we can update Rate, IsTaxable column value when select Product using updateCell method in the change event dropdown editing. Please refer the below syntax and documentation for more information.
Syntax:
gridInstance.updateCell(rowIndex, field, value);
Help Documentation: https://ej2.syncfusion.com/documentation/api/grid/#updatecell
From your code example, we need more details about your query to validate further so, please ensure the following details us.
In your sample, we found that the Grid’s dataSource has been empty and you do not define the dataSource of foreignKeyColumn, dropdownlist editing which are required dataSource to perform the Grid’s CRUD action.
In ForeignKeyColumn, you do not define the column.dataSource property in the foreignKeyColumn(Product) and you have tried to map the different columns value in field and foreignKeyField. By default, in ForeignKey column, bind the external table/JSON data to Grid column and it will display value from foreignKeyValue which is depending on unique values of column.field and column.foreignKeyField.
We shared the Demo sample and documentation about the ForeignKeyColumn Feature.
Demo Sample: https://ej2.syncfusion.com/javascript/demos/#/material/grid/foreign-key.html
Documentation: https://ej2.syncfusion.com/documentation/grid/columns/#foreign-key-column
Note: By default, we are unable update the ForeignKeyField(ProductId) and we should define that foreignKeyColumn’s dataSource since we can map the ForeignKeyValue to Grid column using that columns dataSource.
Also you have enabled the dropdown editing in Product column but dataSource is undefined. Since please ensure that you want to add the dataSource to dropdown editing while perform Grid’s Add action or we misunderstood please share exact requirement to us that will help to validate further.
I have grid with a column that has an editor configured as text field.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
itemId: 'gridPanel123',
store: store,
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield'
}
}]
});
Say the column looks something like this,
Clearly the value of the column is ABCDE.
Now when the user clicks on the column, the editor mode pops up something like this :
Now my question is, is there any kind of renderer that would change the content of the editor based on the value of the column.
Considering my example, column value is "ABCDE", so the editor value is also coming as "ABCDE".
But what if I want to replace all 'A' in the column with 'Z' in the editor .So the editor value for me should have been 'ZBCDE'. How is this possible in extjs?
You can do it by setting value in beforeEdit event in cell editing plugin.
cellediting: {
listeners: {
beforeEdit: function (editor, context) {
context.value = context.value.replace("A", "Z");
}
}
}
To determine which column should be replaced just add check:
if(context.column.dataIndex == 'name'){
context.value = context.value.replace("A", "Z");
}
To reverse replace try :
validateEdit: function (editor, context){
context.record.set('name', context.value.replace("Z", "A"));
context.record.commit();
}
Example on fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2thq.
With ExtJS 5 and 6 a chained store is a store that is a "view" of a source store. The chained store may be sorted & filtered independently without having any impact on the source store.
var mySourceStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name']
});
var myChainedStore = Ext.create('Ext.data.ChainedStore', {
source: mySourceStore
});
And also gridpanels can have a column with comboboxes using the widgetcolumn.
{
xtype: 'widgetcolumn',
text: 'all combos',
widget: {
xtype : 'combobox',
store : myChainedStore,
valueField : 'id',
displayField : 'name',
forceSelection: true
}
}
What I need is each row having another instance of the chained store. And depending on some other value in the row, the chained stored is filtered. In effect the combobox in each row may show a different set of values.
Is it a good approach to use widget columns and chained stores to accomplish this? How would such a solution look like?
PS: Just for the record, these are other approaches that I found to accomplish something similar:
How define differents stores for each cell combobox editor in a grid?
https://www.sencha.com/forum/showthread.php?60618-different-values-for-a-ComboBox-on-each-row-of-an-EditorGrid
You can create instance of store by using:
{
xtype: 'widgetcolumn',
text: 'all combos',
widget: {
xtype : 'combobox',
store : Ext.create('Ext.data.ChainedStore'),
valueField : 'id',
displayField : 'name',
forceSelection: true
}
}
If I use 'x-form-search trigger' as iconCls in a button, the search(magnifying glass) icon appears as an image inside of the button. How do I make the icon the button and not an image inside the button?
Or is there any other way to get the search icon as a button?
Instead of adding a button with search icon you can write a trigger click function and than on click of the search icon i.e a trigger of the combo you can write your logic or call a function
Below is the example
// 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"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody(),
onTrigger1Click: function(event) {
alert('WRITE YOUR LOGIC HERE');
},
});
Our application uses the Ext.grid.Panel to display rows of data. When the user clicks a "New..." button we are adding a new record to the grid store. Everything is working fine.
However, on certain fields, of just this new (as of yet) unsynced records, we would like to display specific empty text within certain cells. For example: 'Enter title here' or 'Choose a platform".
I know there is an emptyCellText property on Column, but a) its broken, and b) I'd like to have this happen only on new, unsynced (e.g. phantom) records.
As I am new to this framework, any ideas are most welcome.
You can add this text in column renderer. You can test if record column value is not set and record is phantom. In this case you can add to column your placeholder text:
columns: [
{
header: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
emptyText: 'Enter name'
},
renderer: function(value, metaData, record) {
if (!value && record.phantom) {
return 'Enter name';
} else {
return value;
}
}
}
]
Edit
For displaying empty text also in editor fields just use emptyText config property in editor configuration. In editor configuration you can define by xtype which type of field will be used (textfield, numberfield, etc.) and add any of field config propertis:
editor: {
xtype: 'textfield',
emptyText: 'Enter name',
// other filed config properties...
},
Fiddle with live example: https://fiddle.sencha.com/#fiddle/3b5