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();
Related
I've come across a rather interesting problem. I have a store, which uses a model. My model looks like this:
Ext.define('HealOmni.model.device_model', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
fields: [
{
name: 'device_id'
},
{
name: 'device_name'
},
{
name: 'device_id_real'
},
{
name: 'sim_number'
},
{
name: 'other_device_details'
},
{
convert: function(v, rec) {
return rec.get('device_name') + " " + rec.get('device_id_real');
},
name: 'device_name_and_id'
}
]
});
and then this store is used by a ComboBox, the combo box looks like this:
xtype: 'combobox',
height: 30,
itemId: 'deviceID',
fieldLabel: 'Device ID',
labelClsExtra: 'screenSharingFontLowerHalf',
labelSeparator: ' ',
displayField: 'device_name_and_id',
queryMode: 'local',
store: 'userDeviceManagementLoggedInDisplay',
valueField: 'device_id_real'
I use the combination field device_name_and_id as the display field of the combobox. However, when I reloaded my site, it seemed that the ComboBox could not display the field properly. When I use the other fields, let's say device_id, it displays just fine. It's only the combination field that does not display and I don't know why.
I log the values to console after I load the store and all fields are displayed, even the combination ones -- so I'm really rather confused as to why the ComboBox won't display properly.
Does anyone know how to show a "convert" field in a combobox?
Please check below fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1m9t
Ext.define('HealOmni.model.device_model', {
extend: 'Ext.data.Model',
fields: [{
name: 'device_name_and_id',
convert: function (v, rec) {
return rec.get('device_name') + " " + rec.get('device_id');
}
}]
});
var storeRec = Ext.create('Ext.data.Store', {
model: 'HealOmni.model.device_model',
data: [{
device_id: 1,
device_name: 'device one with id'
}, {
device_id: 2,
device_name: 'device two with id'
}]
});
Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
valueField: 'device_id',
displayField: 'device_name_and_id',
store: storeRec
});
I've made a small fiddle for you. Compare this to your code, i hope it helps:
https://fiddle.sencha.com/#view/editor&fiddle/1m9e
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
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: {
...
}
}
PROBLEM: We toggle fields on form. When secondField is shown instead of firstField, then form is changed. But secondField is still marked as not dirty, because both fields remain unchanged. Showing secondField should always make it and the form (model) dirty.
RESEARCH: setDirty() method is done on whole record, setValue() acts as expected, but smells like a hack and can't be used for various field types (textfield, combobox).
QUESTION: How to manually set a single form field state changed to invoke saving its data?
You are mixing up data state with form visualisation. By default, "field is shown" has no relation to data, so you need to explicitly create one. This can be done by changing some data on toggling, or other way round — toggling on changing data.
For example, toggling can occur on checking/unchecking a checkbox field which will represent a piece of form data (also see fiddle):
Ext.create('Ext.form.Panel', {
viewModel: {
type: 'default'
},
items: [
{
xtype: 'checkbox',
reference: 'toggle',
itemId: 'toggle',
boxLabel: 'Toggle',
hidden: true
},
{
xtype: 'button',
text: 'Toggle',
enableToggle: true,
toggleHandler: function() {
var form = this.up('form'),
checkbox = form.child('#toggle');
checkbox.setValue(!checkbox.getValue());
console.log(form.isDirty() ? 'Dirty!' : 'Not dirty');
}
},
{
xtype: 'textfield',
name: 'firstField',
fieldLabel: 'First Field',
bind: {
hidden: '{toggle.checked}'
}
},
{
xtype: 'textfield',
name: 'secondField',
fieldLabel: 'Second Field',
bind: {
hidden: '{!toggle.checked}'
}
}
],
renderTo: Ext.getBody()
});
In extJS Form for adding and editing data i want to add a field that will not send any kind of data, only display it to the user when he chooses an id from combobox.
Now everything works fine, it's just i'm playing with code, and want to learn new stuff.
I'm getting data from a table which has material as Primary key and description of that key.
this.brand = Ext.create('Ext.data.Store',
{
fields: ['material','description'],
autoLoad: true,
proxy:
{
type: 'ajax',
url: 'sku/load',
reader:
{
type: 'json',
root: 'data'
}
}
});
Now when i'm adding a new item to the table and choose from combobox
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
i want to have a field underneath it that will show the description of the material, but when i click save it will not send any data.
Something like this:
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
{
name: 'description',
fieldLabel: 'Material Description',
displayField: 'description',
}
for an example i have 3 items
Material Description
1 It's nice
2 It's beautiful
3 It's ugly
So when i chose 1 it will show:
1
It's nice
I tryed with the code above but it kinda failed. What do i have to put into field of description to make it work
One way to accomplish this would be to add a listener to the combo for the change event. And modify a displayfield below when that event fires.
Something similar to this (#comboDescrFld is the displayfield in this example):
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
Here is a fiddle demonstrating the working code.
And the full source below:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel',{
width:400,
height:400,
renderTo:Ext.getBody(),
title:'Example Combo With Field Tied',
items:[{
xtype:'combo',
displayField:'key',
valueField:'key',
store:Ext.create('Ext.data.Store',{
fields:['key','descr'],
data:[{
'key':1,
'descr':'Hello World'
},{
'key':2,
'descr': 'Another Field'
},{
'key':3,
'descr':'Even More Stuff Here'
}]
}),
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
console.log(descr);
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
},{
xtype:'displayfield',
value:'No Selection Made',
itemId:'comboDescrFld'
}]
});
}
});