I have the following store:
Ext.define('Sencha.store.AdultMenuStore', {
extend: 'Ext.data.Store',
config: {
onItemDisclosure: true,
model:'Sencha.model.MenuPoint',
data: [
{
id: 'addChild',
name: 'Add child',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-plussign.png',
xtype: 'addchildform'
},{
id: 'share',
name: 'Share',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-shareicon.png',
xtype: 'childmenu'
},{
id: 'myProfile',
name: 'My Profile',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-profile.png',
xtype: 'childmenu'
},{
id: 'help',
name: 'Help',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-question.png',
xtype: 'childmenu'
}]
}
});
Which uses the following model:
Ext.define('Sencha.model.MenuPoint', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'icon_url', type: 'string'},
{name: 'xtype', type: 'string'}
]
}
});
Some places in the code I add menu points dynamically like this:
var child = children[i];
var menuPoint = Ext.create('Sencha.model.MenuPoint', {id: child.childId, name: child.firstName, icon_url: 'aLink', xtype: 'childmenu'});
store.add(menuPoint);
And sometimes I need to clear the store, ergo remove the menu points I added dynamically and only use the menu points I hardcoded in the store. I see methods for removing and adding in the store, but I dont know how to reset the store and repopulate it with the static data I defined there.
do as I have answered on your prev question, which you did not respect :)
var data = [
{
id: 'addChild',
name: 'Add child',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-plussign.png',
xtype: 'addchildform'
},{
id: 'share',
name: 'Share',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-shareicon.png',
xtype: 'childmenu'
},{
id: 'myProfile',
name: 'My Profile',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-profile.png',
xtype: 'childmenu'
},{
id: 'help',
name: 'Help',
icon_url: 'http://kidsparent.no/images/adultMenu/bkids-home-question.png',
xtype: 'childmenu'
}]
store.load(function (store) {
store.add(data)// data is an array with you local data
})
store.load() function cleans up prev data
Cheers, Oleg
Related
i am building a ecommerce site.
I have trouble adding orderItems to the Array in the Order-Document.
As you can see i am trying to reference the customer-Document and Product-Dokument in my orderItem. i am Posting in an array of objects that looks like:
[
{
productId: '5b79b3f8-6ef8-4c6d-bd85-5dcb14fb836d',
kundenId: 'c3777230-74cd-411b-a455-7fa905c90957',
quant: 1,
name: 'Position 1'
}
]
Can someone help me how i get sanity to understand the strings as _ref ?
My schemas are as follows:
export default {
title: 'Order Item',
name: 'orderItem',
type: 'object',
fields: [
{
title: 'Name',
name: 'name',
type: 'string',
},
{
name: 'kundenId',
title: 'Customer',
type: 'reference',
to: [{ type: 'customer' }],
options: {
disableNew: true,
},
},
{
name: 'productId',
title: 'Product',
type: 'reference',
to: [{ type: 'product' }],
options: {
disableNew: true,
},
},
{
title: 'Quantity',
name: 'quant',
type: 'number',
},
{
title: 'Price',
name: 'price',
type: 'number',
},
],
};
and:
export default {
name: 'order',
title: 'Order',
type: 'document',
fields: [
{
name: 'user',
title: 'User',
type: 'reference',
to: [{ type: 'user' }],
options: {
disableNew: true,
},
},
{
name: 'userName',
title: 'User Name',
type: 'string',
},
{
title: 'Order Items',
name: 'orderItems',
type: 'array',
of: [
{
title: 'Order Item',
type: 'orderItem',
},
],
},
{
title: 'CreatedAt',
name: 'createdAt',
type: 'datetime',
},
],
};
so i solved this by using JSON.parse like so:
productId: JSON.parse(`{"_ref":"${artikel._id}"}`),
Good luck to everyone with the same issue.
I'm new at sencha touch, and i'm having trouble using dataview with an ajax store.
Here follow my code:
On my app.js on the launch part:
Ext.define('SocializeApp.model.Friends', {
extend: 'Ext.data.Model',
config: {
fields: [
{name:'name' ,type:'string'},
{name:'id' ,type:'string'},
{name:'img' ,type:'string'}
]
}
});
Ext.define('SocializeApp.store.FriendStore', {
extend: 'Ext.data.Store',
config: {
model: 'SocializeApp.model.Friends',
storeId: 'FriendStore',
proxy: {
type: 'ajax',
url: 'http://socialize.localhost.com/friends.php',
reader: {
type: 'json',
rootProperty: 'friends'
},
autoLoad: 'true'
},
}
});
Ext.Viewport.add(Ext.create('SocializeApp.view.Main'));
In the Main.js
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
xtype: 'dataview',
store: 'FriendStore',
scrollable: {
direction: 'vertical'
},
tpl: ['{img} {id} {name}']
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
}
});
I'm kind of lost, i used the store as a variable to test and in the console it gave me the correct data, but no optout for this dataview.
FYI the JSON
{"friends":[{"name":"sakai","id":"123","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"124","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"125","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"126","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"127","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"128","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"129","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"110","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"111","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"}]}
I really appreciate any help.
Thx,
Try these (code has the ideas combined).
1 - Give your dataview an itemId, and load the store in your view initialize method. Might also want to try and set autoLoad to false.
2 - Sometimes I also explicitly give the full store reference rather than just the id, for ex Ext.getStore('FriendStore')
3 - Are you using MVC? did you declare your stores /models in your app.js?
Ext.application({
name: 'yourapp',
stores: ['FriendStore'],
models: ['Friends'],
launch: function() {
...
}
});
4 - Or, just thought of this.. change your tpl to 'itemTpl'
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar', 'SocializeApp.store.FriendStore'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
itemId: 'FriendsDataview',
xtype: 'dataview',
store: Ext.getStore('FriendStore'),
scrollable: {
direction: 'vertical'
},
itemTpl: ''.concat(
'<div>{img} {id} {name}</div>'
)
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
},
initialize: function(){
var store = Ext.getStore('FriendStore');
var dv = Ext.ComponentQuery.query('dataview[itemId=FriendsDataview]')[0];
dv.setStore(store);
store.load(function(){
console.log(this);
});
}
});
i am new to sencha touch , i am get an error in this below code is tab change function
error:Uncaught TypeError: Object [object Object] has no method 'getValues'
var uswrfeild = Ext.getCmp('User_details');
//var fieldset = Ext.create('FieldSet_PersonalSettings');
//var fieldset= this.tab;
var values = uswrfeild.getValues();
cart = Ext.create('Items');
//alert(values);
//cart.add({field1:'value1',field2:'value2'});
cart.add(values);
cart.sync();
below code is feild set code
{
xtype: 'container',
title: 'User',
id: 'User_details',
itemId: 'mycontainer3',
scrollable: 'vertical',
items: [
{
xtype: 'fieldset',
id: 'FieldSet_PersonalSettings',
itemId: 'myfieldset12',
margin: '2%',
title: 'User',
items: [
{
xtype: 'textfield',
label: 'Name',
name: 'name',
maxLength: 31,
placeHolder: 'given-name family-name'
},
{
xtype: 'emailfield',
label: 'Email',
name: 'email',
required: true,
maxLength: 63,
placeHolder: 'name#example.com'
},
{
xtype: 'textfield',
label: 'Street',
name: 'street',
required: true,
placeHolder: 'streetname'
},
{
xtype: 'textfield',
label: 'House Number',
required: true,
placeHolder: '123'
},
{
xtype: 'textfield',
label: 'Zipcode',
required: true,
autoCapitalize: true,
maxLength: 10,
placeHolder: '1234AA'
},
{
xtype: 'textfield',
label: 'Country',
required: true,
placeHolder: 'NL'
}
]
},
{
xtype: 'fieldset',
margin: '2%',
title: 'Sharing information',
items: [
{
xtype: 'checkboxfield',
label: 'Receive email',
labelWidth: '75%',
checked: true
},
{
xtype: 'checkboxfield',
height: 49,
label: 'Upload statistics (anonymously)',
labelWidth: '75%',
checked: true
}
]
}
belo code is model
Ext.define('iFP.model.item', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'name',
type: 'string'
},
{
name: 'email',
type: 'string'
},
{
name: 'street',
type: 'string'
},
{
name: 'hno',
type: 'auto'
},
{
name: 'zipcode',
type: 'int'
},
{
name: 'country',
type: 'string'
}
]
}
});
below code is store
Ext.define('iFP.store.userlocalsettings', {
extend: 'Ext.data.Store',
requires: [
'iFP.model.item'
],
config: {
autoSync: false,
model: 'iFP.model.item',
storeId: 'usersettingslocalstore',
proxy: {
type: 'localstorage'
}
}
});
my aim is the text feid values are stored in browser localstore.
please help me any buddy.
Thanks in advance.
You should first set id for each field, like this for example
{
xtype: 'textfield',
label: 'Name',
name: 'name',
maxLength: 31,
placeHolder: 'given-name family-name',
itemId: 'tfName'
},
then you can get value of field after some event in function
var namefield = this.down('#tfName');
var namevalue = namefield.getValue();
...
and then you can add that value to store
var store = Ext.getStore('userlocalsettings');
store.add({name: namevalue});
store.sync();
Hope this will help.
you should set ID for your form.
config: {
itemId: 'form1'
}
Then in your controller add reference to that ID
refs: {
myPanel: '#form1'
}
I can't see your button listener. suppose the name of the listener is "onTapSave" then you should try this,
onTapSave: function(component,button, options){
var uswrfeild = this.getMyPanel();
var values = uswrfeild.getValues();
}
I am new to sencha touch and I am having trouble loading a form into a view.
In my app.js I am loading the main view as such
Ext.Viewport.add(Ext.create('app.view.Main'));
My full app.js is as follows
Ext.application({
name: 'app',
requires: [
'Ext.MessageBox',
'Ext.form.FieldSet',
],
views: ['Main'],
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create('PlanPouch.view.Main'));
},
});
My main view is:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
form
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
I took the form from the official documentation and the form doesn't load for some reason. So how can I add the form to my main view?
First let it solve by your approach. Make the following changes & it should work in your system (Running on mine):-
1.) In app.js
Ext.Viewport.add(Ext.create('app.view.Main'));
2). In Main.js
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype: form
}
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
But i will not prefer to call the formpanel in the way you are doing. Rather you can follow ARolek answer OR follow this approach :-
1) app.js
Ext.application({
name: "app",
views: ["Main","second"],
launch: function () {
Ext.Viewport.add(Ext.create('app.view.Main'));
}
});
2) Main.js
Ext.define("app.view.Main", {
extend: "Ext.Container",
requires:["app.view.second"],
config:{
fullscreen: true,
layout:
{
type: 'fit'
},
items:[
{
xtype: "form"
}
]
}
});
3) second.js
Ext.define("app.view.second", {
extend: "Ext.form.Panel",
requires:['Ext.form.FieldSet','Ext.Toolbar'],
alias: "widget.form",
config:
{
items:
[
{
xtype: 'fieldset',
title: 'About You',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
If you want the form to always be in app.view.Main, then simply do:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
Just wondering is there a way to handle that in Sencha Touch.
One store and after applying different filters, the store can be used for different places.
For example:
I have a store:
Ext.regModel('abc', {
fields: [{name: 'tid', type: 'int'}, {name: 'name', type: 'string'}, {name: 'parent', type: 'int'}]
});
var store = new Ext.data.Store({
model: 'abc',
proxy: {
type: 'ajax',
url : 'read.php',
reader: {
type: 'json',
root: 'items',
fields: ['tid', 'name', 'parent']
}
},
autoLoad: true,
});
And in a FormPanel, it has two selectfields:
items: [
{
xtype: 'selectfield',
name : 'One',
label: 'Category',
// store: store, <-- Load the whole store
store: function(){
store.filter('name', 'digital'); <-- Load part of store
},
displayField: 'name',
valueField: 'tid'
},{
xtype: 'selectfield',
name : 'Two',
label: 'subCategory',
// store: store, <-- Load the whole store
store: function(){
store.filter('parent', 1); <-- Load part of store
},
displayField: 'name',
valueField: 'tid'
},{
...}
]
Afraid not, You need two instances of your store.
Why not extend your store, just to make it pre-configured like this:
Ext.regModel('abc', {
fields: [{name: 'tid', type: 'int'}, {name: 'name', type: 'string'}, {name: 'parent', type: 'int'}]});
MyStore = Ext.extend(Ext.data.Store, {
constructor: function(config) {
config = Ext.apply({
model: 'abc',
proxy: {
type: 'ajax',
url : 'read.php',
reader: {
type: 'json',
root: 'items',
fields: ['tid', 'name', 'parent']
}
},
autoLoad: true,
}, config);
MyStore.superclass.constructor.call(this, config);
}
})
Then you can use multiple instances of your store and filter them how you want:
items: [
{
xtype: 'selectfield',
name : 'One',
label: 'Category',
store: new MyStore(), //1st instance of MyStore
displayField: 'name',
valueField: 'tid',
listeners : {
'render' : function(){
this.store.filter('name', 'digital');
}
}
},{
xtype: 'selectfield',
name : 'Two',
label: 'subCategory',
store: new MyStore(), //2nd instance of MyStore
displayField: 'name',
valueField: 'tid',
listeners : {
'render' : function(){
this.store.filter('parent', 1);;
}
}
},{
...}
]