I am implementing a RowEditing functionality
Here is one of the grid column
header: 'City', dataIndex: 'City_id',
editor: {
xtype: 'combobox',
queryMode: 'local',
displayField: 'text',
valueField: 'value',
store: Ext.create('Ext.data.Store', {
fields: ['text', 'value'],
data: [
{ text: 'Atlanta', value: '1' },
{ text: 'New York', value: '2' }
]
})
}
Stored procedure returns only city Id, that is 1 or 2. Now because I used " dataIndex: 'City_id' " at the header - only 1 or 2 is binding to the grid.
My question here is, in this I want to bind text not value to the display. How can I do this? Please suggest me.
Usually you would use a renderer on the column to display the text instead of the value.
Something along the lines of:
renderer:function(value) {
return this.editor.store.findRecord("value",value).get("text");
}
#Alexander's answer is the right way to go for updating the displayed value in the column.
To fix the issue with the column header, use the text property, not the header property, in the first line of your code sample.
Column config:
{ text: 'City', // NOT header: 'City'
dataIndex: 'City_id',
editor: {
...
}
}
Related
I am using Ext JS 3.4 and in the composite field, there are three fields, code is as below:
xtype: 'compositefield',
name: 'comboField',
fieldLabel: 'Partner with',
width: 400,
cItems:[{
xtype: 'combo',
name: 'partnerTypeCombo',
value: 'ProviderName',
mode: 'local',
store: new Ext.data.ArrayStore({
fields: ['id', 'displayValue'],
data: [
['ProviderName', 'Provider Partner Name'],
['OtherProvider', 'Other Provider Partner']
]
}),
valueField: 'id',
displayField: 'displayValue',
listeners: {
scope: this,
select: function(combo, record, index) {
var providerField = this.formPanel.getForm().findField('comboField_providerPartnerNameField');
var otherProviderField = this.formPanel.getForm().findField('comboField_otherProviderPartnerNameField');
if (combo.value == "OtherProvider") {
providerField.setVisible(false);
otherProviderField.setVisible(true);
}
else {
providerField.setVisible(true);
otherProviderField.setVisible(false);
}
}
}
}, {
xtype: 'spacer',
width: 10,
flex: 0
}, {
xtype: 'modellinkfield',
name: 'providerPartnerNameField',
modelLevelType: 'Organization',
modelType: 'Organization',
pickerReport: {
reportName: 'TMS.SupplierVendorOrgPicker',
targetLevelType: 'Organization'
}
}, {
xtype: 'textfield',
name: 'otherProviderPartnerNameField',
hidden: true
}]
By using the above code and without hiding any field, I got the below result
But My expectation is
By default third field (which is text field) should be hidden
On selecting Combobox values, the next two fields should be visible/hidden.
Like if dropdown field value is "Provider Partner Name" then only second
field (modeling field) should be visible (shown as below)
And if dropdown field value is "Other Provider Name" then only third
field (i.e text field) should be visible.
But I am unable to achieve this third objective. I am getting the following output for this (the field is getting overridden)
And I am expecting the following output.
Looks like this may be some layout issue or maybe I need to apply some CSS style to handle this. Can someone please help me to solve this issue.
Able to solve this issue by using below code :
otherProviderField.ownerCt.doLayout();
I have a grid with with cell editing plugin:
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
title: 'MyGrid',
emptyText: __('no_data'),
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [
{
text: 'Email',
dataIndex: 'email',
editor: {
xtype: 'combo',
queryMode: 'local'
},
renderer: function(value) {
// this I wont to use value as store combo
return value;
}
}
]
});
Value in renderer function is an array. How to use it as store in combo inside editor?
I solved my problem by using widget column with combobox.
{
xtype: 'widgetcolumn',
flex: 1,
text: 'Email',
editor: {},
widget: {
xtype: 'combo',
queryMode: 'local',
displayField: 'email',
valueField: 'email',
editable: false,
value: 0,
listeners: {
afterrender: 'afterComboEmailRender',
change: 'onComboEmailChange'
}
}
}
And I dynamically set store from cell record to combo after it render.
I am not sure if the value in the column would be the value that the user selects from the combobox. If this was the case and the values that you are selecting from will be the same for all the columns, then you can create a store for that combobox and bind it.
I am trying to create two combo boxes. The first one shows the country names and the second one shows provinces/states. The idea is to filter the second combo based the selection on first one and put the value of 'VisitingCountryProvince' as the default selection.
The problem with the below code is, it is not selecting the default value based on the first combo box. If I remove the bind filter, the second combo box shows the correct value of 'VisitingCountryProvince'.
Any idea?
{
xtype: 'fieldset',
title: 'Visiting Country',
layout: 'anchor',
anchor: '-10',
collapsible: false,
defaults: {
xtype: 'combo',
labelStyle: 'font-weight: bold;',
flex: 1,
anchor: '0',
editable: false,
forceSelection: true,
allowBlank: false,
emptyText: 'Select...',
queryMode: 'local',
},
items: [{
name: 'VisitingCountry',
fieldLabel: 'Main',
reference: 'visitingCountryFieldRef',
publishes: 'value',
store: {
type: 'arraydropdownstore'
},
valueField: 'value',
displayField: 'value'
}, {
name: 'VisitingCountryProvince',
fieldLabel: 'Sub',
store: {
type: 'array',
fields: ['value', 'countryName']
},
bind: {
filters: {
property: 'countryName',
value: '{visitingCountryFieldRef.value}'
}
},
valueField: 'value',
displayField: 'value'
}]
},
The closest answer to the issue I could find is in here, How to use combo "publishes" value & bindings to filter store on another combo
I just figured out that, I can do either filter or select a default value, not both. How do I filter and bind a default value from the filtered list?
You need to write your logic of filtering the values of second combo store in the "select" event handler of the first combo box.
{
name: 'VisitingCountry',
fieldLabel: 'Main',
reference: 'visitingCountryFieldRef',
publishes: 'value',
store: {
type: 'arraydropdownstore'
},
valueField: 'value',
displayField: 'value',
listeners:{
select:function(){
//Access the second[bound to second combobox]store and apply the
//filter, Also there are arguments for select event handler, for this
//Please refer docs.sencha.com for extjs version you are using.
}
}
}
I have the following application: https://fiddle.sencha.com/#view/editor&fiddle/1nmm. I'm using extjs 6.
After double click event on a row, I want to open a new tab. The new tab should contain a form with the information from the grid. My problem is that when I try to bind the displayfield value, the output is empty( nothing is shown).
xtype: 'displayfield',
fieldLabel: 'Id',
bind: {
value: '{record.data.ts_id}'
}
The above 'record' is declared as follow:
config: {
record: null,
rowIndex: null
},
bind: {
record: '{recordVM}',
rowIndex: '{rowIndexVM}'
}
How to properly bind to displayfield's value?
2 things:
1) Modify the way you're passing data to the viewmodel in the TabUIController:
viewModel: {
data: {
record: record,
rowIndex: rowIndex
}
}
There's no point trying to re-map those things.
2) Modify the bind statement in your view to value: '{record.ts_id}', the binding is smart enough to drill into the fields when it sees a record.
Try this:
TabUIGrid.js
bind: {
store :'{users}',
selection : '{myrecord}'
},
TabFormTest.js
{
xtype: 'displayfield',
fieldLabel: 'Name',
bind: '{myrecord.ts_name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
bind: '{myrecord.ts_email}'
}
I tested it on your fiddle and it works fine.
I'm trying to edit an open source program (and learn Extjs meanwhile) and I encountered a problem about models. I don't want to put code here since it is too long but I can provide if necessary.
So I got a a class which extends Ext.form.Panel and model "PartModel" assigned to it. This model has a string field called "partNumber" along with many other fields.
In this panel I want to choose a part number from a combobox from predefined values at database and assign it to "partNumber".
The problem is I want to assign value that is "displayed" in the combobox.(Not one of store fields, I'm using a custom XTemplate for it)
How can I do it?
Edit: Adding combobox code. I thought adding "dataIndex: 'partNumber'" would be sufficient to do job but this code isn't working at all. I can see Part Numbers strings from combobox but when I choose one and hit save button it doesn't save. (There are many other fields working well with that save button maybe I just need to add another button to save part number?)
{
xtype: 'combobox',
dataIndex: 'partNumber',
fieldLabel: "Part Number",
labelWidth: 150,
flex: 1,
store:{
xtype: 'store',
autoLoad: true,
model: 'PartGroupsClasses',
proxy: getPartGC()},
queryMode: 'local',
renderTo:Ext.getBody(),
tpl:Ext.create('Ext.XTemplate','<tpl for="."><div class="x-boundlist-item">{code}-{descr}-{ccode}-{cdescr}</div></tpl>'),
displayTpl:Ext.create('Ext.XTemplate','<tpl for=".">{code}{descr}{ccode}{cdescr}</tpl>')
}
Edit2: Figured out save button is basically calling following function.
Ext.override(Ext.data.Model, {
setDataWithAssociations: function(data) {
for (var i in data) {
if (this.fields.containsKey(i)) {
this.set(i, data[i]);
}
if (this.associations.containsKey(i)) {
var store = this[i]();
store.add(data[i]);
}
}
}
});
I would do something like this... in your combobox's model, add an extra field that makes use of the convert function to create your displayValue, and then in your combobox, just use that value for your displayValue property.
Model
Ext.define('MyComboModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'code',
type: 'string'
},
{
name: 'desc',
type: 'string'
},
{
name: 'ccode',
type: 'string'
},
{
name: 'cdesc',
type: 'string'
},
{
name: 'displayValue',
type: 'string',
convert: function(value, record) {
return record.get('code') +
record.get('desc') +
record.get('ccode') +
record.get('cdesc');
}
}
]
});
Combo
xtype: 'combobox',
name: 'Field2',
valueField: 'displayValue',
displayField: 'displayValue',
fieldLabel: 'Field2',
queryMode: 'local',
Full example.
I dont thing your question is clear enough for a clear answer...
I am unclear on your objective but if you want to have something display on store and behind it have the value on the file please take a look see if this examples helps
Store
this.data = Ext.create('Ext.data.JsonStore', {fields: ['id', 'data'],
data: [{id: 1, data: 'data1'},
{id: 2, data: 'data2'},
{id: 3, data: 'data3'},
{id: 4, data: 'data4'}]});
Combo
xtype:'Combobox',
name:'wtv',
displayField: 'data',
valueField: 'id'
It will display the combo with data but if you get the combo with the selection path and do for example
Selector
refs: [{
ref:Combo
selector:'Panel Combobox[name=wtv]'
}]
Later you can do something like
Panel.getCombo().getValue() and it will not
give you back the displayed field (Data) but it will give the id.
Sorry for bad formating! Hope it helps