I have a combo box and I want get id of first record from server by alert(combo.store.data[0].id); But it's not working
Here is my code
xtype: 'combo',
value: '0',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false,
fieldLabel: 'example',
mode: 'remote',
displayField:'name',
valueField: 'id',
store: Ext.create('Ext.data.Store', {
......
,listeners: {
'afterrender': function(combo){
alert(combo.store.data[0].id);
}
}
How can i do that thanks.
Probably you are missing something.
combo.store.getAt(0).data.id
Try this.
Inside combobox listeners "afterrender" :
var getState = combo.getState(), //get current combobox state
comboState = parseFloat(getState.value) - 1,
comboStore = combo.store;
comboStore.on("load", function(s,rs) {
comboStore.each(function(record, key) {
if( key == comboState){
//console.log(record);
alert(record.data.id);
}
});
});
Related
I am fairly new to ExtJS and I am having trouble with my stores. I have two combo boxes on a pop up and each is set to a store.
items: [
{
xtype: 'combobox', itemId: 'facility', name: 'facilityId', fieldLabel: 'Facility', displayField: 'name', valueField: 'id', queryMode: 'local', allowOnlyWhitespace: false, forceSelection: true,
store: {
model: 'Common.model.Facility', autoDestroy: true, sorters: 'name'
},
listeners: {
change: function (field, newValue) { this.up('window').filterLocations(); }
}
},
{
xtype: 'combobox', fieldLabel: 'Location', name: 'locationId', displayField: 'name', valueField: 'id', queryMode: 'local', allowOnlyWhitespace: false, forceSelection: true,
store: {
model: 'Common.model.PrimaryLocation', autoDestroy: true, sorters: 'name'
},
// Strange hack from Sencha to get around filter-on-load issue http://www.sencha.com/forum/showthread.php?80079-Problem-to-filter-a-combobox-s-store-at-store-s-load-event
triggerAction: 'all', lastQuery: ''
}
],
It is referenced here(I think) in another code file(I'll only post the one I care about for now):
// Load comboboxes
window.getFacilityId().getStore().load({
scope: this,
callback: function (records, operation, success) {
if (!success) {
Ext.log({ level: 'error', msg: 'Error loading facility list', dump: operation });
var text = (operation.getError() ? operation.getError().response.responseText : operation.getResponse().responseText);
var msg = Ext.decode(text).message;
Ext.Msg.show({ title: 'Error', msg: 'Error loading facility data.<br>' + msg, buttons: Ext.Msg.OK, icon: Ext.Msg.ERROR });
}
else {
// Select first entry if only one
if (records.length == 1)
window.getFacilityId().setValue(records[0].get('id'));
}
}
});
There is a field on the form that calls this has a value I need to do a comparison on. If the value is null or 0, then I really don't need to do anything because as it is, it displays all the facilities in the database.
However, if it is not null or 0, then I need the store to be filtered to only show the single facility in the list that matches the one on the value that I am comparing it to.
How do I make this filter work? To make it easy, just assume that the facility store has just id and name as fields and assume that the value I'm comparing it to is facilityId.
Something like:
if (facilityId == null)
// What?
Thank you.
Before using load method on the store, set filter if your condition is met like:
window.getFacilityId().getStore().setFilters({
property: 'id',
operator: '=',
value: facilityId
});
I have a piece of code which makes a combobox active when a checkbox is checked. Once the checkbox is checked I can select a value from the combobox. But I want the combobox to return having no value (blank) once the checkbox is unchecked. How do i do that?
My code is as follows:
var tests = [
['Test1'],
['Test3'],
['Test2']
];
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: ['test']
});
var testsStore = new Ext.data.Store({
model: 'Test',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: tests
});
var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
bodyPadding: 10,
width: 550,
style: 'margin:16px',
height: 300,
title: 'Testing example',
items: [{
xtype: 'checkboxfield',
name: 'system',
boxLabel: 'Production (PACTV)',
inputValue: 'production',
listeners: {
change: function (checkbox, newValue, oldValue, eOpts) {
var combo = checkbox.up('form').down('combobox');
if (newValue) {
Ext.getCmp('secondComboID').setReadOnly(false);
Ext.getCmp('secondComboID').allowBlank = false;
Ext.getCmp('secondComboID').validate();
} else {
Ext.getCmp('secondComboID').setReadOnly(true);
Ext.getCmp('secondComboID').allowBlank = true;
Ext.getCmp('secondComboID').validate();
}
}
}
}, {
xtype: 'combobox',
fieldLabel: 'Select Test',
readOnly: true,
id: 'secondComboID',
store: testsStore,
valueField: 'id',
displayField: 'test',
typeAhead: true,
forceSelection: true,
editable: true,
triggerAction: 'all',
lastQuery: ''
}]
});
Here is a working fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1u9n
Use this in your fiddle when you uncheck the checkbox:
Ext.getCmp('secondComboID').reset();
Use this code to remove the datas from the combo or to load empty array data in the combo
Ext.getCmp('secondComboID').getStore().loadRawData([]);
Also if You wish to load the previous datas again here is an example of it which allows us to toggle to load the datas and to remove datas from combo
Try the FIDDLE
I have 2 combos, I want to force to select the first combo (employer combo), after it's selected then the combo 2 (employee combo) is enable.
ExtJS 4.2.1
The code of the combos is:
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Right now my remote combo employee combo send into the query param "searchStr" that is the string typed in the combo. I need to pass also the selection from combo 1 (employer combo).
How can I achieve this? Thanks.
use something like this.
Ext.ComponentQuery.query('EmployerId').value
Ext.getCmp('EmployerId').value
var empValue = getComponent('EmployerId').value
if .value not work then try getValue() method.
Hope this helps.
in your second component(EmployeeId) add configuration disabled:true on load.
then add afterrender listener to the first one. and then set the other combo available.
Then do this............................................................................
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
listeners: { <---------------------here
select: function(combo, selection) {
if (combo.getValue() != undefined) {
Ext.ComponentQuery.query('EmployeeId').setDisabled(false)
} <----------------------------- to here
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
disabled:true, <------------add this
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Hope this helps :)
I have a dependent combo box that is required. When the parent combo box value is selected, the dependent combo is cleared and the store is reloaded. How do I keep the ExtJs validation error from showing during the reload?
new Ext.form.ComboBox({
id: 'ddlMake',
store: makeStore,
displayField: 'Description',
valueField: 'TypeCode',
width: 110,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a make',
selectOnFocus: true,
allowBlank: false,
listeners:
{
select: function (combo, record, index) {
var selVal = Ext.getCmp('ddlMake').getValue();
var modelCombo = Ext.getCmp('ddlModel');
modelCombo.setValue('');
modelCombo.store.reload({
params: { categoryTypeCode: 'MODEL', subCategoryTypeCode: selVal }
});
}
}
}),
new Ext.form.ComboBox({
id: 'ddlModel',
store: modelStore,
displayField: 'Description',
valueField: 'TypeCode',
width: 110,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a model',
selectOnFocus: true,
allowBlank: false
}),
The Reset() method will clear any validation messages. Here is what I ended up using:
function LoadModelCombo(combo, record, index) {
var selVal = Ext.getCmp('ddlMake').getValue();
if (selVal != '') {
var modelCombo = Ext.getCmp('ddlModel');
modelCombo.setValue('');
modelCombo.store.reload({
params: { categoryTypeCode: 'MODEL', subCategoryTypeCode: selVal }
});
modelCombo.reset();
}
}
I don't have the exact code, but there are methods to silence other listeners - See docs for stopEvent and stopPropogation.
I have 3 combo box's. When you click the first box the second box needs to update showing the relevant data. I select the first combo the second box updates perfectly. However if i try the same steps again the second box doesn't stop loading ( see image )
Here is the code from my view
{
xtype: 'combobox',
name: 'Clients',
id: 'clients',
displayField: 'Name',
store: 'Clients',
queryMode: 'local',
mode: 'local',
valueField: 'Id',
fieldLabel: 'Clients'
},{
xtype: 'combobox',
name: 'Projects',
id: 'projects',
displayField: 'Name',
editable: false,
store: 'Projects',
queryMode: 'local',
mode: 'local',
valueField: 'Id',
fieldLabel: 'Projects'
}
and from my controller
stores: ['Projects', 'Clients', 'Jobs'],
init: function () {
this.control({
'#clients': {
change: this.onClientSelect
},
'processlist button[action=copy]': {
click: this.onCopyPart
},
'#processColourContainer #processColourGrid': {
edit: this.onPurchaseOrderColourUpdate
}
});
},
onLaunch: function () {
var clients = this.getClientsStore();
clients.load();
},
onClientSelect: function (selModel, selection) {
var projects = this.getProjectsStore();
projects.load({
url: '/Projects/Read/?clientId=' + selection,
scope: this
});
},
Known bug:
http://www.sencha.com/forum/showthread.php?153490-Combo-Box-Store-Loading
Adding this should sort it out:
store.on('load', function (store, records, successful, options) {
if (successful && Ext.typeOf(combo.getPicker().loadMask) !== "boolean") {
combo.getPicker().loadMask.hide();
}
});
I had the same symptom with a local data store with ExtJS Combobox, but the correct fix was to set queryMode properly in the combo box - there's no bug in the store (at least in 4.1 version of ExtJS). queryMode must be set to "local" instead of its default "remote" value, if your data is stored locally within the data store (as in my working example below).
ComboBox:
xtype: 'combobox',
name: 'sizeMaxUnits',
value: 'TB',
editable: false,
displayField: 'abbr',
**queryMode: 'local',**
store: 'UnitsStore',
valueField: 'units'
Store:
Ext.define('DiskApp.store.UnitsStore', {
extend: 'Ext.data.Store',
requires: [
'DiskApp.model.UnitsModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
model: 'DiskApp.model.UnitsModel',
storeId: 'MyStore',
data: [
{
abbr: 'MB',
units: 'M'
},
{
abbr: 'GB',
units: 'G'
},
{
abbr: 'TB',
units: 'T'
}
]
}, cfg)]);
}
});
I found that hooking into the 'expand' event on the combo worked better (hooking into 'load' on the store somehow destroyed the binding of the combo to the store, causing all sorts of horrible, hard to track down errors).
combo.on('expand', function (field, options) {
if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
field.getPicker().loadMask.hide();
}
}, this);
This did the job for me without breaking my application.
A really simple solution is to add the listConfig config to your combo box:
{
xtype:'combobox',
fieldLabel: 'My Combo',
listConfig: { loadingText: null, loadMask: false },
}