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.
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()
})
}
});
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 have an Ext.grid.Panel with RowEditor plugin, and it contains a column with a combobox editor:
{
dataIndex: 'parentId',
text: 'Parent category',
editor: {
store: store,
valueField: 'categoryId',
displayField: 'name',
xtype: 'combobox',
allowBlank: true
}
The store looks like this:
var store = Ext.create('Ext.data.Store', {
model: 'Category',
autoLoad: true,
proxy: {
type: 'rest',
url: 'api/categories',
reader: {
type: 'json',
root: 'categories'
}
}
});
And model:
Ext.define('Neopod.model.Category', {
extend: 'Ext.data.Model',
fields: ['categoryId', 'name', 'parentId'],
})
When editing a grid row and clicking on combobox for the first time, then ExtJS triggers data load from the server and the roweditor cancels automatically. So user expected to see combo dropdown, but combo not opened and instead the edit mode cancels.
So why does ExtJS behave this way ?
A simple handling is to configure your combobox with: queryMode: 'local' so that it doesn't try to reload whenever it is expanded.
Using your example:
{
dataIndex: 'parentId',
text: 'Parent category',
editor: {
store: store,
valueField: 'categoryId',
displayField: 'name',
xtype: 'combobox',
allowBlank: true,
queryMode: 'local'
}
}
You can also try configuring your RowEditing plugin with autoCancel: false e.g.:
Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'rowediting',
clicksToEdit: 2,
autoCancel: false
});
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
}
});