How to store the selectfield in sencha touch, such that when a field is selected, the value used by any method, but when the page refreshed, it is automatically select the previous selection.
My Code:
{
xtype: 'fieldset',
items: [{
xtype: 'selectfield',
id: 'remem',
label: 'MY Label',
store: 'remem',
options: [
{
text: 'Option1',
value: 'a'
},
{
text: 'Option2',
value: 'b'
}]
}]
}
#developer, #jenson and I are suggesting you should save the value in a cookie so the value is persisted between browser refreshes. Extjs offers a cookie manager class in the utilities namespace if I remember correct.
EDIT
For Sencha Touch you should actually make use of the LocalStorage proxy as per the docs here
There's an example in the docs showing how to save user specific information for retrieval later on (after refreshes, etc)
I have actually made use of this for my own application by saving user display preferences in my application so when they next login the UI is as they left it.
Store:
Ext.define('MyApp.store.UserPreferencesStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.UserPreferencesModel',
'Ext.data.proxy.LocalStorage'
],
config: {
model: 'MyApp.model.UserPreferencesModel',
storeId: 'UserPreferencesStore',
proxy: {
type: 'localstorage',
id: 'userpreferences'
}
}
});
Model
Ext.define('MyApp.model.UserPreferencesModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'userPrefKey'
},
{
name: 'userPrefValue'
}
]
}
});
With this setup you can add a record as you normally would do for any other store
store.add({userPrefKey: '01-showMap', userPrefValue: true});
or edit existing entries
rec = store.findRecord('userPrefKey','01-showMap');
rec.set('userPrefValue',false);
You must also call sync() on the store whenever you want to save changes, and to retrieve the saved records from local storage just call load() like for any other store.
Note that my code was written for Touch 2.3, so it may have changed slightly in the most recent 2.4.x version. But this should certainly get you on your way.
store select field value into localstorage and assign that value to selectField whenever you refresh page . So you will get always previous selected value.
Related
I created this fiddle showing what I want to do.
Basically, I configured a Store that loads only a single record (it reality it will be the currently signed in user). However, I can't seem to bind anything to that store properly. How can I get that {u.name} to output properly?
Here is the code:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name']
});
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.Component({
renderTo: Ext.getBody(),
viewModel: {
stores: {
u: {
proxy: {
type: 'ajax',
url: 'user.json'
},
model: 'User',
autoLoad: true
}
}
},
bind: 'Test name: {u.name}'
});
}
});
Try bind: 'Test name: {u.data.items.0.name}'
UPD:
As an explanation to this - u is an object with its properties, so trying to bind to u.name will actually bind to the name property of the store. Wile the store has no name property it will always be null. Store's received data is placed in data property. Items property contains a raw array of received data and so on.
In your fiddle you're using a store while it looks like you need just a single record.
Using links instead of stores should work better, like:
links: {
u: {
type: 'User',
id: 1
}
}
Working example based on your code: https://fiddle.sencha.com/#fiddle/uuh
I have the following code (sloppy, I know...first javascript app). I am trying to get a combobox to populate with a list of features that fall under a given release (as selected in the first combobox). Almost everything is now working correctly, except everytime I click the feature combobox for the first time, it loads ALL features and completely ignores the filter. Even if I change the release box first, the feature box still populates with all features only on first click. Subsequent times it shows the correctly filtered features.
Even stranger, I've tried writing the total records in the Feature Store to the console, so I can see when this happens. When the feature combobox is first created, it has the correct number of records in it. However, as soon as I click the feature combobox for the first time, it triggers the "load" listener of the combobox, and pulls in all the features, ignoring the filter completely.
I'm so boggled, I've tried so many things to debug this, and at this point have no other options. Does anyone have any ideas as to why it would load the correct data first, then reload it and ignore the filters on first click?
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create("Rally.ui.combobox.ReleaseComboBox", {
fieldLabel: 'Choose a Release',
width: 300,
listeners: {
ready: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
select: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
scope: this
}
});
this.add(relComboBox);
},
_loadFeatureInfo: function() {
var featureStore = Ext.create("Rally.data.WsapiDataStore", {
model: "portfolioitem/Feature",
fetch: ["Name", "_ref"],
autoLoad: true,
filters: [
{
property: "Release",
operator: "=",
value: this._releaseRef
}
],
listeners: {
load: function(store) {
this._updateFeatureBox(store);
},
scope: this
}
});
},
_createFeatureBox: function(featureStore) {
this._featureComboBox = Ext.create("Rally.ui.combobox.ComboBox", {
fieldLabel: 'Choose a Feature to move',
store: featureStore,
listeners: {
select: function (combobox) {
this._featureRef = combobox.getRecord().get("_ref");
//calls method to get and display children of this feature in a grid
},
scope: this
}
});
this.add(this._featureComboBox);
},
_updateFeatureBox: function(featureStore) {
if (this._featureComboBox === undefined) {
this._createFeatureBox(featureStore);
} else {
this._featureComboBox.clearValue();
this._featureComboBox.bindStore(featureStore);
//calls method to get and display children of this feature in a grid
}
}
This is probably an issue caused by the featureStore loading twice: once when you created it, and the combobox also tells it to load again once the user opens the combobox to pick a Feature.
I encountered a very similar issue with a combobox on Stories, and I'd betcha dollars to donuts that Matt Greer's answer:
Strange Load behavior with Rally.ui.combobox.ComboBox
To my question, is the answer to yours too...
I recently posted about getting a combobox into the settings of a Rally app, now I'm trying to figure out how checkboxes work in settings. I assumed they would work similarly [ish] but for some reason it's not [hence why i'm on this site again].
My checkbox field and getSettingsField function look like this right now:
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
defaultType: 'checkboxfield',
items: [
{
name: 'box1',
boxLabel: 'Box 1:',
inputValue: true,
value: true,
id: 'boxone'
}
]
}
];
}
At the top of my app I also have the following default settings set:
config: {
defaultSettings: {
box1: true
}
},
I console.log()'d the setting for that checkbox inside the launch function and found that the setting starts at "true" but the checkbox is not originally checked. When I check the box and save the settings, the setting stays at "true" and again unchecks when i go back to the settings tab. This would all be okay, but when I save the settings with the box unchecked, the setting still stays as "true".
I tried changing the defaultSetting to false just for testing, but again I only got a "true" setting field for box1. My logging line, console.log('Setting: ' + this.getSettings()); is what is showing me the current value for each setting each time the app is loaded & each time the settings are changed.
The goal is to get the checkbox setting to read correctly [true / false or whatever syntax the settings come in] at the beginning of the app so a grid can be filtered later. Does someone know what I'm doing wrong?
So apparently the settings tab is returning a string, so "true" is returned from the inputValue, not the boolean true value. Also, the value setting is messing things up, so here's what I ended up using:
config: {
defaultSettings: {
boxes: "check"
}
},
...
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
defaultType: 'checkboxfield',
items: [
{
name: 'boxes',
boxLabel: 'Box 1:',
inputValue: "one",
checked: this.getSettings().boxes.split(',').indexOf('one') > -1,
id: 'boxone'
},
{
name: 'boxes',
boxLabel: 'Box 2:',
inputValue: "two",
checked: this.getSettings().boxes.split(',').indexOf('two') > -1,
id: 'boxtwo'
}
]
}
];
}
I learned that the 'name' field is a generic field that should apply to all checkboxes that are related to each other in the settings panel. The 'inputValue' field is the returned string to the settings field, and each returns to a string in this.getSettings().boxes.
I wanted to keep the boxes to remember if they were checked before, so that's where the line checked: this.getSettings().boxes.split(',').indexOf('one') > -1 comes from. If the string 'one' is in the settings, that means the index will be larger than one, so checked will be true and therefore the box will be checked next time someone opens the settings menu.
I would like to send data with setActiveItem() when doing view change from this store:
Ext.define('SkSe.store.Places',{
extend:'Ext.data.Store',
config:{
autoDestroy: true,
model:'SkSe.model.Places',
//hardcoded data
data: [
{
name: 'Caffe Bar XS', //naziv objekta
icon: 'Icon.png', //tu bi trebala ići ikona kategorije kojoj pripada
stamps: 'stamps1' //broj "stampova" koje je korisnik prikupio
},
{
name: 'Caffe Bar Mali medo',
icon: 'Icon.png',
stamps: 'stamps2'
},
{
name: 'Caffe Bar VIP',
icon: 'Icon.png',
stamps: 'stamps3'
}
]
//dynamic data (Matija)
//remember to change the icon path in "Akcije.js -> itemTpl"
/*proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
reader:{
type:'json',
//name of array where the results are stored
rootProperty:'results'
}
}*/
}
});
This is my my details controller that should get data from places store:
Ext.define('SkSe.controller.Details', {
extend: 'Ext.app.Controller',
config: {
refs: {
placesContainer:'placesContainer',
Details: 'details'
},
control: {
//get me the list inside the places which is inside placesContainer
'placesContainer places list':{
itemsingletap:'onItemTap'
//itemtap:'onItemTap'
}
}
},
onItemTap:function(list,index,target,record){
console.log('omg');
var addcontact= Ext.create('SkSe.view.Details',
{
xtype:'details',
title:record.data.name,
data:record.data
});
var panelsArray = Ext.ComponentQuery.query('details');
console.log(panelsArray);
Ext.Viewport.add(addcontact);
addcontact.update(record.data.name);
Ext.Viewport.setActiveItem(addcontact);
console.log(record.data.name);
}
});
I would like to send name record from the places.js model above. I heard that you can't pass data with setActiveItem but should create a function that updates view(No I can't use pop and push here).
I'm not very familiar with sencha touch syntax and I'm not sure what functions to use to do that, clearly update function is not that.
I switched up your logic slightly but have provided a working example of what I think you are trying to do.
SenchaFiddle is a little different from what I get running on my machine but you should be able to get the idea.
The initial list loaded gets the data from your store, and on itemtap will push a new view onto the viewport.
You will need to add a navigation button to get back to the list from view.View as well as a better layout for the details. I would suggest nested containers or panels with custom styles to get the details just right. Alternatively you can just drop a full html snippet in there with all the data laid out like you want.
Would be happy to help more.
Fiddle: http://www.senchafiddle.com/#XQNA8
I have a Model that contains an association to another Model. I am able to display the nested data into a form by using the mapping attribute on the field. Example:
Ext.define('Example.model.Request', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: Ext.data.Types.NUMBER,
useNull: false
}
{
name: 'plan_surveyor',
mapping: 'plan.surveyor',
type: Ext.data.Types.STRING
}
],
associations: [
{type: 'hasOne', associationKey: 'plan', getterName:'getPlan', model: 'Specs.model.Plan'}
],
proxy: {
type: 'direct',
api: {
read: requestController.load,
update: requestController.update,
},
reader: {
type: 'json',
root: 'records'
},
writer: {
type: 'json',
writeAllFields: true,
nameProperty: 'mapping'
}
}
});
Using this method, I can display the plan.surveyor value in the form by reference plan_surveyor. I call Form.loadRecord(model) to pull the data from the model into the form.
However, now that I'm trying to send the data back to the server, I get the error:
Error performing action. Please report the following: "Unrecognized field "plan.surveyor"
I am attempting to save to the server by first calling Form.updateRecord(model), then model.save(). Is there a way to have the Writer understand that 'plan.surveyor' is not a property name but instead to properly handle nesting?
Am I doing this the right way to start with, or should I just be handling the setting of the form data and loading back into the model in a more manual fashion? It seems that nested data is not all that well supported in general - any recommendations?
Ext.define('Example.model.Request', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: Ext.data.Types.NUMBER,
useNull: false
}
{
name: 'plan_surveyor',
mapping: 'plan.surveyor',//change to 'plan_surveyor'
type: Ext.data.Types.STRING
}
],
change that show in comment ,because data index is given in above format because ur give ur format thata time that is not dataindex it's a column or extjs preparatory ,so please change that may it's work well
it's not work u will send hole code