Related
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 a users grid, on double click of users grid I am showing update user form in a window modal popup.
on dblClick of users grid I am adding user-detail-window
to mainView.
user-detail-window contains a user-detail form, which contains checkbox field called active
If user_abc is not active, then for the first time after opening update form for user_abc, its showing unchecked active field (this
is correct behavior, user_abc is already deactived)
If you open any other user record (which is active) and then again open user_abc (this is already deactivated), its shows active filed checked (instead of showing unchecked)
i) I have a checkbox field in user update form i.e. my UserDetail view
Ext.define('TestCMS.view.UserDetail', {
extend: 'Ext.form.Panel',
alias: 'widget.user-detail',
itemId: 'user-detail',
items: [
{
xtype: 'combobox',
name: 'locale',
fieldLabel: 'Taal',
store: 'i18n.Language',
displayField: 'iso639',
valueField: 'iso639',
autoLoad: true,
forceSelection: true,
editable: false,
triggerAction: 'all',
bind: '{currentText.locale}',
},
{
xtype: 'checkboxfield', //all fields in this form
name: 'active', //are showing proper data,
fieldLabel: 'Actief', //except this checkbox
bind: '{currentText.active}'
},
{
xtype: 'ckeditor',
fieldLabel: 'description',
itemId: 'ckeditor-body',
name: 'text',
bind: '{currentText.text}',
msgTarget: 'under',
CKConfig: {
extraPlugins: wordcount,notification',
}
}
});
ii) Following is MainView
Ext.define('TestCMS.view.UserMain', {
extend: 'Ext.container.Container',
alias: 'widget.user-main',
itemId: 'user-main',
layout: 'border',
defaults: {
split: true,
border: 0
},
viewModel: {
type: 'user-vm',
},
items: [
{
xtype: 'user-grid',
reference: 'user-grid',
region: 'west',
width: 350,
title: 'users',
multiSelect: false
}
});
iii) Following is detailWindowView
Ext.define('TestCMS.view.UserDetailWindow', {
extend: 'Ext.window.Window',
alias: 'widget.UserDetailWindow',
itemId: 'user-detail-window',
controller: 'user-detail',
requires: [
'TestCMS.controller.UserDetail',
],
layout: 'fit',
minHeight: 632,
minWidth: 1088,
closable: true,
modal: true,
closeAction: 'destroy',
maximizable: true,
bind: {
hidden: '{userDetailPanelDisabled}',
},
items: [
{
xtype: 'user-detail',
}
],
renderTo: Ext.getBody(), //This line causes the bug
});
I have added this line (i.e. renderTo: Ext.getBody()) to show Popup window on entire screen.
Without this line popup window is showing within a container only.
After adding only this line in above code, checkbox functionality related error occurred, otherwise it was working fine.
iv) Following is user gridview dblClick handler
onItemDblClick: function (view, record, item, index, e, eOpts) {
var userDetailWindow = Ext.widget('UserDetailWindow');
var mainView = view.up('#user-main');
viewModel = mainView.getViewModel();
mainView.add(userDetailWindow);
userDetailWindow.down('#user-detail').loadRecord(record);
contentWindow.show();
contentWindow.setTitle('user: ' + viewModel.data.userName);
},
Found solution after trying many different things
1) Removed Items[] from detailWindowView
items: [
{
xtype: 'user-detail',
}
],
2) Added user-detail runtime to user-detail-window
within onItemDblClick
mainView.add(userDetailWindow);
//added this line and problem solved
contentWindow.add(Ext.widget('user-detail'));
contentWindow.show();
contentWindow.setTitle('user: ' + viewModel.data.userName);
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'
}]
});
}
});
I have a combobox:
var cmbMarket = new Ext.form.ComboBox
({
id: 'cmbMarket',
fieldLabel: 'Market',
allowBlank: false,
store: config.marketStore,
queryMode: 'local',
displayField: 'marketName',
forceSelection: true,
valueField: 'id'
});
When user starts typing something in the combobox it correctly filters its contents so to help user to find what they are searching for.
Problem is that, when user leaves the combobox text blank, search does not reset!
In other words, assuming this list:
can
cat
coockies
...
salt
say
If user starts typing "c" and then leaves the combo blank, its contents are only words starting with "c", so:
can
cat
coockies
At start I though it was because of the "local" queryMode, making combo losing its data. Anyway if User writes "s" after that the list
salt
say
correctly appears, so data is still there!
Where is the problem?
What ExtJS version do you use?
I've made fiddle for you problem in Ext5.1 and Ext4.2 and it works correct.
Look https://fiddle.sencha.com/#fiddle/j6s
Ext.define('App.model.Business', {
requires: [ 'Ext.data.reader.Xml' ],
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'string'
}, {
name: 'MarketName',
type: 'string'
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
model: 'App.model.Business',
data : [
{MarketName: 'coo', Id: '1'},
{MarketName: 'caa', Id: '2'},
{MarketName: 'saul', Id: '3'},
{MarketName: 'sdsq', Id: '4'}
]
});
Ext.create('Ext.panel.Panel', {
title : 'XML Model Example',
layout : 'hbox',
items : [{
xtype: 'combo',
fieldLabel: 'Market',
allowBlank: false,
store: store,
queryMode: 'local',
displayField: 'MarketName',
forceSelection: true,
valueField: 'Id'
}],
renderTo: Ext.getBody()
});
}
});
I have a combobox in a form:
{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}
Data is:
1 => Administrator
2 => User
3 => Guest
Now, if I don't touch anything when editing a user, on my server for my combobox I get "Administrator" (displayField), but when I change something in combobox I get the "id" (valueField). I really just want "id" in both cases. I was reading about hiddenName? Is that the case?
If you need any more code, feel free to ask. :)
Thank you!
EDIT (more code)
1.) There is no default value.
Here is the whole view code:
Ext.define('App.view.Suits.Update', {
extend: 'Ext.window.Window',
title: 'Suits',
width: 250,
id: 'UpdateWindowSuits',
defaultType: 'textfield',
items: [{
xtype: 'UpdateFormSuits'
}],
buttons: [
{ text: 'Save', id: 'submitUpdateFormButtonSuits'},
{ text: 'Cancel', id: 'cancelUpdateFormButtonSuits'},
]
});
Ext.define('App.view.Suits.UpdateForm', {
extend: 'Ext.form.Panel',
alias: 'widget.UpdateFormSuits',
layout: 'form',
id: 'UpdateFormSuits',
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'Id',
name: 'id',
hidden: true
},{
fieldLabel: 'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Status',
name: 'status',
allowBlank: false
},{
xtype: 'combobox',
fieldLabel: 'Priority',
name: 'suit_priority_id',
id: 'ComboboxSuitPriorities',
store: Ext.create('App.store.SuitPriorities'),
editable: false,
displayField: 'name',
hiddenName: 'id',
valueField: 'id'
},{
xtype: 'combobox',
fieldLabel: 'Jurisdictions',
name: 'jurisdiction_id',
id: 'ComboboxJurisdictions',
store: Ext.create('App.store.Jurisdictions'),
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
}],
});
Here is the store:
Ext.define('App.store.SuitPriorities', {
extend: 'Ext.data.Store',
// Where is the Model.
model: 'App.model.SuitPriority',
// "id" of the Store.
storeId: 'SuitPriorities',
// Autoload all data on creation.
autoLoad: true,
// Number of records in one page (for pagination).
pagesize: 20,
// Proxy for CRUD.
proxy: {
// Type of request.
type: 'ajax',
// API for CRUD.
api: {
create : 'php/suitpriorities/update',
read : 'php/suitpriorities/read',
update : 'php/suitpriorities/update',
destroy : 'php/suitpriorities/delete'
},
// Type of methods.
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
},
// Reader.
reader: {
// Which type will the reader read.
type: 'json',
// Root of the data.
root: 'suitpriorities',
rootProperty: 'data',
// One record.
record: 'SuitPriority',
// Message and success property.
successProperty: 'success',
messageProperty: 'message'
},
// Writer (when sending data).
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true
},
});
As I sad, the store is getting all the data because it's already loaded when I press the combobox. It's a simple JSON with 'id' and 'name' properties.
EDIT2: I've tried this for my Jurisdictions because I wasn't getting the right data selected in combobox. This is inside my controller.
onJurisdictionComboRender: function(combobox, eOpts){
// Getting the selected row.
var record = this.grid.getSelectionModel().getSelection()[0];
// Selected jurisdiction.
var jurisdiction = record.data.jurisdiction_id;
// Select it in combobox.
combobox.select(jurisdiction);
}
That doesn't make sense... If you read out the combo the correct way, meaning let either the form doing the work or calling getSubmitValue() on your own the combo would always returning the valueField. hiddenName is used for other purposes. Please take a look at the console of this JSFiddle and recheck how you fetch the combo value.
Here's the working demo-code
// The data store containing the list of states
var roles = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data : [
{"id":1, "name":"Administrator"},
{"id":2, "name":"User"},
{"id":3, "name":"Guest"}
//...
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Role',
store: roles,
queryMode: 'local',
editable: false,
displayField: 'name',
valueField: 'id',
renderTo: Ext.getBody()
});
combo.on('select', function(cb){ console.log(cb.getSubmitValue()); })
+1 for everyone for helping but the problems was here:
In my store I've put autoLoad: false and inside my combobox I've put store.load() manually and it works perfectly.
Thank you all! :)