This is something that I found in the tutorials
items: [{
anchor: '100%',
xtype: 'multiselect',
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect',
id: 'multiselect-field',
allowBlank: false,
store: {
fields: ['number', 'numberName'],
proxy: {
type: 'ajax',
url: 'Numbers',
reader: 'array'
},
autoLoad: true
},
valueField: 'number',
displayField: 'numberName',
value: ['3', '4', '6'],
ddReorder: true
}];
But when I tried it in my code error occurred. Is there something else that needs to be done additional to just changing xtype from combo to multiselect to make it a mutiselect?
{
xtype: 'combo',
fieldLabel: 'Reporting Manager',
labelWidth: '130px',
store: 'LeaveRequest',
displayField: 'reportingmanager',
afterLabelTextTpl: required,
name: 'reportingmanager',
allowBlank: false,
//dockedItems: 'multiselect-field',
afterLabelTextTp1: required
}
Multiselect is an user extended class, If you look at the begining of the code in the tutorials the ux files are included.
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);
You need to include those files in order for the multiselect to work
<script type="text/javascript" src="extjs/examples/ux/form/MultiSelect.js"></script>
<script type="text/javascript" src="extjs/examples/ux/form/ItemSelector.js"></script>
Check in your firebug/developer tools if this files are loaded , and then you can use xtype multiselect;
Related
I have the below combobox set to put some records through API call and then display on the page. I need to submit 2 values when user clicks submit, 1) gmiExchangeCode and 2) gmiFuturesCode. The first value works through this form's field, the gmiFuturesCode doesn't work on updating the hidden form field.
}, {
xtype: 'combo',
autoLoad: true,
hideTrigger: true,
fieldLabel: 'Product',
displayField: 'gmiDescription',
valueField: 'gmiExchangeCode',
submitValue: true,
name: 'exchange',
queryMode: 'remote',
queryParam: 'entry',
typeAhead: true,
minChar: 2,
tpl: new Ext.XTemplate('<tpl for="."><div class="x-boundlist-item" style="border-bottom:1px solid #757575;">{gmiExchangeCode} - {lisaMarket} - {gmiFuturesCode} - {gmiDescription}</div></tpl>'),
store: {
fields: ['text', 'value'],
proxy: {
type: 'ajax',
url: 'API',
reader: {
type: 'json'
}
}
},
listeners: {
select: function (combo, record, index) {
hidden.setValue(record.get('gmiFuturesCode'));
}
}
}, {
xtype: 'hidden',
id: 'futures',
name: 'futures'
}, {
There is nothing called "hidden.setValue()" you have to get the object using the query selector or Ext.getCmp('ObjectID')
Here is a working Example Fiddle
Ext.create('Ext.form.Panel', {
title: 'test',
width: 400,
height: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'combobox',
reference: 'states',
publishes: 'value',
fieldLabel: 'Select State',
displayField: 'displayField',
anchor: '-15',
store: {
fields: ['valueField', 'displayField'],
data: [
['1', 'MyDisplayValueFor1'],
['2', 'MyDisplayValueFor2'],
['3', 'MyDisplayValueFor3']
]
},
minChars: 0,
queryMode: 'local',
typeAhead: true,
listeners: {
select: function (combo, record, index) {
console.log(record.get('displayField'));
Ext.getCmp('futures').setValue(record.get('displayField'));
Ext.Msg.alert('Alert', 'The hidden Field value from the getter is : ' + Ext.getCmp('futures').getValue());
}
}
}, {
xtype: 'hidden',
id: 'futures',
name: 'futures'
}]
})
Try this
Ext.getCmp('futures').setValue(record.get('gmiFuturesCode'));
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 2 DropDownBoxes, where 1 of the drop box value is depanded on the selected value of the first.
How do i create a dynamic store in the second DropDownBoxes.
This is the code:
{
xtype: 'combobox',
displayField: 'vendor_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose vendor...',
selectOnFocus:true,
fieldLabel: 'Vendor Name',
margin: 10,
id: 'txtBidVendor',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'vendor_name'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendors.jsp',
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
{
xtype: 'combobox',
displayField: 'rate_desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Choose Quality...',
selectOnFocus:true,
fieldLabel: 'Vendor Quality',
margin: 10,
id: 'txtBidVendorQuality',
labelWidth: 100,
store: Ext.create('Ext.data.Store', {
fields:[
{name: 'rate_desc'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: 'GetVendorQuality.jsp?' + Ext.urlEncode({'bid_vendor': Ext.getCmp('txtBidVendor').value}),
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
})
},
I get the error: "Cannot read property 'value' of undefined " ,in the line where i try getting "Ext.getCmp('txtBidVendor').value"
About what you are trying to accomplish here I have two considerations:
The error here is that you are trying to access to the txtBidVendor component at definition time (it doesn't exists), when you send a configuration object (like these two comboboxes here) you are not actually creating them, but just setting the initial configuration that will be used by its parent for later instantiation.
What I think you are trying to do is to change the query parameter value for the store, when the selection changes on txtBidVendor combobox. To accomplish that, you must listen for the selection event of the first combobox and then modify and reload the store of the second one. Something like this:
{
xtype: 'combobox',
displayField: 'vendor_name',>
emptyText: 'Choose vendor...',
selectOnFocus: true,
fieldLabel: 'Vendor Name',
id: 'txtBidVendor',
store: vendorStore,
listeners: {
select: function (combo, records, eOpts) {
var record = records[0]; // just want the first selected item
rateStore.getProxy().extraParams.bid_vendor = record.get('vendor_name');
alert('Store will load now with bid_vendor =' + record.get('vendor_name'));
rateStore.load();
}
}
}
For sake of readability it will be good idea to take store definition out of the components definition itself also. Here you can find a working sample of it.
Hope it helps.
Why does this fail with cannot call method 'getProxy' of undefined?
{
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
}
taken from docs...
It 100% fails at this peice of code.
The problem is likely that you're defining items on the prototype of your object. You shouldn't do that because it means it will be shared by all instances, also it will try to instantiate your store while defining the class, instead of when the class is instantiated.
Instead of
Ext.define('my.Panel', {
items: {
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
}
});
Do
Ext.define('my.Panel', {
initComponent: function() {
this.items = {
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: {
// Let Ext instantiate the store
type: 'array',
// Don't use this, it's an euphemism for a global
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
},
displayField: 'name'
}
});
I think cause it is missing an end quote in 'name
This code works fine
Ext.widget({
name: 'customer_name',
xtype: 'combobox',
fieldLabel: 'Customer',
emptyText: 'ex. Google',
allowBlank: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name'],
data: [ 'google', 'facebook', 'twitter']
}),
displayField: 'name'
})
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! :)