Code:
xtype: 'selectfield',
id: 'selectType',
cls: 'combobox',
store: 'ProvidersType',
displayField: 'name',
valueField: 'id',
listeners: {
change: function(field, value) {
alert(111);
}
}
I have "111" alert after application load, not only when selecting new option in selectfield. Also I have this alert after using setStore or setValue or updateOptions methods... It's very bad because I'm loading options for selectfield from json, and always have an error, because parameters for json request I'm taking from current selected selectfield value... Any ideas how to avoid this behavior and make it works normally like in jQuery?
EDITED:
Hm, it works fine with static options, but works bad if I'm loading options from store...
This code works good and I have alert only on select change:
xtype: 'selectfield',
id: 'selectType',
cls: 'combobox',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
],
listeners: {
change: function(field, value) {
alert(111);
}
But if I'm connecting options from store I have alert right away application load:
xtype: 'selectfield',
id: 'selectType',
cls: 'combobox',
store: 'ProvidersType',
displayField: 'name',
valueField: 'id',
listeners: {
change: function(field, value) {
alert(111);
}
}
Store is:
Ext.define('Providers.store.ProvidersType', {
extend: 'Ext.data.Store',
config: {
model: 'Providers.model.Provider',
proxy: {
type: 'scripttag',
url : 'http://example.dk/providers/service.php',
extraParams: {
action: 'provider_types',
username: 'test2',
callback: '?',
format: 'json'
},
reader: {
type: 'json',
rootProperty: 'providers'
}
},
autoLoad: true
}
});
Related
With ExtJs (4.2) version, wanted to know how to filter the empty records from the combobox dropdown list.
The code uses Extjs store to fetch a data from jsp, the result is a json object. Say below is the results rendered,
{ "data" : [
{"source":"system1","key1" : "value system1", "key2" : " value for system1"},
{"source":"system2","key1" : "value 11", "key2" : " value for key1, value 12"},
{"source":"system3" }, //Blank or empty key1, key2 record.
....
}
Js code with ExtJs
I am using ExtJs to display a combobox (Dropdown) below is the code fragment
var dataStore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['key1', 'key2'],
proxy:
{
type: 'ajax',
url: '<url to a jsp file which retruns json data>',
reader:
{
type: 'json',
root: 'templates'
}
}
});
...
var screenPanel = {
xtype: 'fieldset',
title: 'Panel - Data',
margin: '0 10 15 15',
padding: 10,
flex: 1,
width:"100%",
layout: 'anchor',
defaults: {
labelWidth: 160,
},
items: [
{
xtype: 'checkbox',
name: 'visibility',
id: 'visibility',
fieldLabel : 'Check to enable',
value:false
},
{
xtype: 'combobox',
anchor: '80%',
name: 'combodropdown',
itemId: 'combo1',
fieldLabel: 'Dropdown selection',
displayField: 'key2',
valueField: 'key1',
store: dataStore,
},{
xtype: 'container',
anchor: '80%',
....
The combox dropdown is listing the empty record as well. Is there a way to filter that value. In the above case the "source" : "system3" doesn't have key1 and key2 value but the xtype:combo (name: combodropdown) is listing a blank item as well.
Is there any example, on using an event to filter the data that are empty. like onClick event to filter the data like below
....
{
xtype: 'combobox',
anchor: '80%',
name: 'combodropdown',
itemId: 'combo1',
fieldLabel: 'Dropdown selection',
displayField: 'key2',
valueField: 'key1',
store: dataStore,
//some thing like this
onClick: function(value1,value2){
alert('clicked combox dropdown')
//data store value empty return something
}
You can use store filter. Something like:
Ext.application({
name: 'Fiddle',
launch: function () {
var dataStore = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: ['key1', 'key2'],
proxy: {
type: 'ajax',
url: 'comboData.json',
reader: {
type: 'json',
root: 'data'
}
},
filters: [
function (item) {
return !Ext.isEmpty(item.get('key1')) && !Ext.isEmpty(item.get('key2'));
}
]
});
Ext.create('Ext.form.Panel', {
title: "Sample Panel",
items: [{
xtype: 'combobox',
name: 'combodropdown',
itemId: 'combo1',
fieldLabel: 'Dropdown selection',
displayField: 'key2',
valueField: 'key1',
store: dataStore,
listeners: {
expand: function(comboBox) {
console.log(comboBox.getStore().getRange());
}
}
}],
renderTo: Ext.getBody()
})
}
});
I have a view in ExtJS that contains a grid where the user can select an entry plus some panel with details about the currently selected row. Each time another row is selected the view is reloaded, which causes the grid to loose input focus for keyboard navigation.
How can I reload grid store data and keep input focus on the grid? My model defines idProperty and thus the correct row gets selected, but column selection and input focus gets lost. I am using ExtJS v7.3.0.55 with the Classic Triton theme.
Example
Extend the code in the existing Grid with JSON Store Sencha Fiddle with a data model and some grid event listener to reproduce the issue:
Ext.application({
name: 'Fiddle',
launch: function () {
// My data model with custom ID field
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'},
],
idProperty: 'email',
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
model: 'User',
proxy: {
type: 'ajax',
// Loading data from ./simpsons.json in the fiddle ./Data folder.
url: 'simpsons.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
store: 'simpsonsStore',
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
// Add some event handler to reload grid data, restore selected row
listeners: {
select: function (sender) {
console.log('grid selection update');
var record = sender.getSelected();
var store = sender.getStore();
store.load();
// This will restore the selected row, but grid focus is lost
sender.setSelected(record);
}
}
});
}
});
Try to put the selection in the store`s load handler:
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
// Using Named Store
store: 'simpsonsStore',
// Load the data
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
select: function (selectionRowModel, selectedRecord, selectedIndex) {
var store = selectionRowModel.getStore();
store.on('load', function(store) {
selectionRowModel.select(selectedIndex, true, true);
}, this, {
single: true
})
store.load();
}
}
});
View:
{
xtype: 'combo',
anchor: '100%',
reference: 'il',
fieldLabel: 'İl',
name: 'il',
forceSelection: true,
typeAhead: true,
displayField: 'il',
store: 'il',
cls :'text-font',
baseCls :'fieldcolor',
valueField: 'il'
},
{
xtype: 'combobox',
anchor: '100%',
reference: 'ilce',
fieldLabel: 'İlce',
name: 'ilce',
forceSelection: true,
typeAhead: true,
displayField: 'ilce',
store: 'ilce',
filters: {
property: 'il',
value: 'ilid'
},
cls :'text-font',
baseCls :'fieldcolor',
valueField: 'ilce'
},
Model:
Ext.define('ertg.model.ilmodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'il'
},
{
name: 'ilid'
}
]
});
Another model:
Ext.define('ertg.model.ilcemodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'ilce'
},
{
name: 'ilid'
}
]
});
Hi guys,This my comboboxes is run error .error this:Uncaught TypeError: me.store.getFilters is not a function
at constructor.onEndUpdateFilters
Whats Problem ??
Thanks
Ertugrul
xtype combobox simply has no filters {} config. in order to filter the entries of a combobox, one has to configure an event listener, which then calls store.filter(), while passing on the property & value to filter for... just see the API docs: it's config filters vs. method filter ...while both of them belong to the store - and not the combobox. the docs for Ext.util.Filter are also relevant.
based upon the provided code below, I'd suggest to write it alike this (the requires should already be loaded by the store class, would omit them, too... only know that I never require any them):
Ext.define('ertg.store.ilce', {
extend: 'Ext.data.Store',
requires: ['ertg.model.ilcemodel'],
model: 'ertg.model.ilcemodel',
storeId: 'ilce',
filters: null,
proxy: {
type: 'ajax',
url: 'resources/data/ilce.json',
reader: {type: 'json'},
writer: {type: 'json'}
}
});
I have a nested list in my application, and when users make a selection they are taken to a detailCard with some options. One of these options is to "confirm" their selection. Once confirmed, the selection should be removed from the list. This works on the server side, so if the app is refreshed the selection is gone. However I was hoping to remove the selection in the treeStore itself and refresh the view somehow so that users can immediately see the effect of their confirmation. I was following a tutorial for nestedList that I can't seem to find anymore, and this code is based on that:
var itemId = '';
Ext.define('MyApp.view.MainView',
{
extend: 'Ext.tab.Panel',
xtype: 'main',
alias: "widget.mainview",
requires: [
'Ext.dataview.NestedList',
'Ext.data.proxy.JsonP'
],
config:
{
tabBarPosition: 'bottom',
items: [
{
xtype: 'nestedlist',
title: 'Listings',
iconCls: 'home',
displayField: 'listingValue',
scrollable: true,
detailCard:
{
xtype: 'panel',
scrollable: true,
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
readOnly: true,
title: 'Schedule Information:',
items: [
{
name: 'from',
id: 'from',
xtype: 'textareafield',
label: 'From',
readOnly: true
},
{
name: 'to',
id: 'to',
xtype: 'textareafield',
label: 'To',
readOnly: true
},
{
name: 'moreInfo',
id: 'moreinfo',
xtype: 'textfield',
label: 'More Info',
readOnly: true
},
]
},
{
xtype: 'container',
flex: 1,
items: [
{
xtype: 'button',
text: 'Confirm',
action: 'confirmSelection',
margin: '10 5',
padding: '5',
ui: 'confirm'
}]
}]
},
listeners:
{
itemtap: function (nestedList, list, index,
element, post)
{
var detailCard = this.getDetailCard();
detailCard.setHtml('');
itemId = post.get('id');
Ext.getCmp('from').setValue(post.get(
'from'));
Ext.getCmp('to').setValue(post.get('to'));
Ext.getCmp('moreinfo').setValue(post.get(
'moreinfo'));
}
},
store:
{
type: 'tree',
fields: [
'id', 'from', 'to', 'fromcity', 'tocity',
'time', 'address',
{
name: 'leaf',
defaultValue: true
},
{
name: 'listingValue',
convert: function (value, record)
{
listingValue = '$<b>' + record.get(
'address') + '</b> ' + record
.get('fromcity') + ' to ' +
record.get('tocity');
return listingValue;
}
}
],
root:
{
leaf: false
},
proxy:
{
type: 'jsonp',
url: 'http://myURL.com/page.php?action=go',
reader:
{
type: 'json',
rootProperty: 'root'
}
}
}
},
{
title: 'Dashboard',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Dashboard'
},
]
}]
}
});
I have no idea what to do at this point, because the store is set up in the view and I'm not sure how to access it in my controller. I learned about treeStore.removeAll() and treeStore.load(), but how can I call those functions in a controller when the store is set up without any type of reference name? Is there a way I can remove the user's selection and display the view, or perhaps reload the view altogether so it can retrieve the new list from the server?
Because my list is on the first page of my app, I managed to get away with window.location.reload(); and reloading the whole app. Its not the most elegant solution, but the changes are reflected.
I won't accept my own answer just yet in case someone comes along with a better solution.
I am having some issues getting the values to actually load in a Sencha Touch selectfield when I try to load a json file.
The relevant pieces of my code are:
Ext.regModel('d', {
fields: [{
name: 'Name', type: 'string'
}, {
name: 'id', type: 'int'
}]
});
Ext.regStore('TempStore', {
model: 'd',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/sampledata.json',
reader: {
type: 'json',
root: 'd'
}
}
});
items: [{
xtype: 'selectfield',
label:'My Field',
id: 'Test',
name: 'Name',
store: 'TempStore',
displayField: 'Name',
valueField: 'id',
placeHolder: 'Select a Value'
}
I have the samepledata.json file in the same folder as the .js file, and the page loads fine but when I press the selectfield it comes with an empty list.
Any ideas?
EDIT: typos
Please remove quotes around the store name.
items: [{
xtype: 'selectfield',
label:'My Field',
id: 'Test',
name: 'Name',
store: TempStore, //No quotes here.
displayField: 'Name',
valueField: 'id',
placeHolder: 'Select a Value'
}
Also see: Sencha Touch SelectField API
Well, I do this:
{
xtype: 'selectfield',
label: 'Cuenta',
name: 'cuenta',
store: 'TipoPago',
displayField: 'name',
valueField: 'name',
}
And it works perfectly. Of course I have my model and store already defined for TipoPago, I have myapp.store.TipoPago and myapp.model.TipoPago.