I have couple of tree panels, each configured with individual tree stores. I have configured a proxy for one store. On load event of this, i am trying to load the second store(proxy memory) like below. But it doesn't work.
EXT js Version: 4.0.7
_treeStore2 = Ext.create('Ext.data.TreeStore', {
model: 'Scenario',
proxy : {
type : 'memory'
}
});
_treeStore1 = Ext.create('Ext.data.TreeStore', {
model: 'Scenario',
root:'data1',
proxy : {
type : 'ajax',
url: '/proj/examples?id='+_Id,
reader : {
type : 'json',
root:'data1'
}
},
listeners: {
'load': {
fn: function(store, records, success, operations) {
_treeStore2.setRootNode(_treeStore1.getProxy().getReader().jsonData.data2);
}
}
});
Sample JSON data:
{"data1":[{"name":"value","children":[]}],"data2":[{"name":"value","children":[]}]}
Try using loadData(data2) or loadRawData methods.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-loadRawData
Related
Hi i am trying to use javascript session storage on my app in sencha touch with model, after a long search on the internet i am not getting lucky at all, please help if you can, Thanks.
This is my code so far.
My Controller the onStorage function works, getStorage usession.load fails to load, thats were i'm stuck
Ext.define('SideMenu.controller.Menu', {
extend: 'Ext.app.Controller',
currView:'home',
requires: ['SideMenu.model.Mymdl'],
config: {
refs: {
btn_localstore:'#btn_localstore',
btn_getlocalstore:'#btn_getlocalstore'
}
control: {
btn_localstore:{
tap: 'onStorage'
},
btn_getlocalstore:{
tap: 'getStorage'
},
},
onStorage:function(){
//create model and store data
var myMod = Ext.create('SideMenu.model.Mymdl',{
brandName:'Nike Jordan',
brandCat:'Sneakers'
});
myMod.save({
success:function(res){
console.log('saved to model : '+res.get('brandName'));
}
});
},
getStorage:function(){
var usession = Ext.ModelMgr.getModel('SideMenu.model.Mymdl');
console.log('model is :'+usession);
usession.load(0, {
scope: this,
success: function(model, opp) {
console.log('passed '+model.get('brandCat'));
},
failure: function(record, operation) {
console.log('failed : '+operation);
// Ext.Viewport.setMasked(false);
//====================================================
// alert('could not get session details');
//====================================================
}
});
}
}
My Model
Ext.define('SideMenu.model.Mymdl', {
extend : 'Ext.data.Model',
xtype : 'Mymdl',
requires:['Ext.data.proxy.SessionStorage'],
id : 'Mymdl',
config: {
fields: [
'brandName',
'brandCat'
]
,
proxy : {
type: 'localstorage',
id : 'mymdl'
}
}
});
My app.js i excluded the other stuff dts not needed in this case
models: ['Mymdl'],
views: ['Main', 'Home'],
controllers: ['Menu'],
launch:function()
{
Ext.create('SideMenu.model.Mymdl');
}
Your answer would be appreciated, thanks
You will need to call the model load method using the id of the model data you want to retrieve from local storage.
You can get the id from the model save callback function
var modelId;
myMod.save({success:function(res){
modelId = res.getId();
console.log('saved to model : '+res.get('brandName'));
}
});
Then use this id when you load the model:
SideMenu.model.Mymdl.load(modelId, function(record) {
console.log('Brand: ' + record.get('brandName'));
}
You can set the id value directly when you save the model. This would save you from having to retrieve and save the auto-generated id on each save.
I am trying to store data offline aspect, but here i want to store data on localstorage, did not store able to store this, all value getting null in localstorage.
This the based on ; http://www.robertkehoe.com/2012/11/sencha-touch-2-localstorage-example/
Models:
*Online.js*
Ext.define('default.model.Online', {
extend: 'Ext.data.Model',
config: {
fields: [
'cat_id',
'category_name'
]
}
});
Offline.js
Ext.define('default.model.Offline', {
extend: 'Ext.data.Model',
config: {
fields: [
'cat_id',
'category_name'
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'category'
}
}
});
Stores:
Ext.define('default.store.News', {
extend:'Ext.data.Store',
config:{
model:'default.model.Online',
proxy: {
timeout: 3000, // How long to wait before going into "Offline" mode, in milliseconds.
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363?_dc=1376475408437&page=1&start=0&limit=25' , // Sample URL that simulates offline mode. Example.org does not allow cross-domain requests so this will always fail
reader: {
type: "json",
rootProperty: "data"
}
},
autoLoad: true
}
});
Controller:
Ext.define('default.controller.Core', {
extend : 'Ext.app.Controller',
config : {
refs : {
newsList : '#newsList'
}
},
init : function () {
var onlineStore = Ext.getStore('News'),
localStore = Ext.create('Ext.data.Store', {
model: "default.model.Offline"
}),
me = this;
localStore.load();
onlineStore.on('refresh', function (store,record) {
Ext.Msg.alert('Notice', 'You are in online mode', Ext.emptyFn);
// console.dir(record.data.name);
console.dir(record.get('category_name'));
console.log(record.items[0].raw.category_name);
console.log(record.get('category_name'));
// Get rid of old records, so store can be repopulated with latest details
localStore.getProxy().clear();
store.each(function(record) {
var rec = {
name : record.data.category_name+ ' (from localStorage)' // in a real app you would not update a real field like this!
};
localStore.add(rec);
localStore.sync();
});
});
onlineStore.getProxy().on('exception', function () {
me.getNewsList().setStore(localStore); //rebind the view to the local store
localStore.load(); // This causes the "loading" mask to disappear
Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn); //alert the user that they are in offline mode
});
}
});
I think, I am not getting value from this record.data.category_nam . Here I am getting first value from this:record.items[0].raw.category_name. So how to store in localstorage.
and View file:
Ext.define('default.view.Main', {
extend : 'Ext.List',
config : {
id : 'newsList',
store : 'News',
disableSelection : false,
itemTpl : Ext.create('Ext.XTemplate',
'{category_name}'
),
items : {
docked : 'top',
xtype : 'titlebar',
title : 'News List'
}
}
});
In localstorage, following output:
category-5ea01a8d-ef1e-469e-8ec4-790ec7306aaf
{"cat_id":null,"category_name":null,"id":"5ea01a8d-ef1e-469e-8ec4-790ec7306aaf"}
category-f3e090dd-8f25-4b20-bb6e-b1a030e07900
{"cat_id":null,"category_name":null,"id":"f3e090dd-8f25-4b20-bb6e-b1a030e07900"}
category-5148e6eb-85ae-4acd-9dcd-517552cf5d97
{"cat_id":null,"category_name":null,"id":"5148e6eb-85ae-4acd-9dcd-517552cf5d97"}
category-ec23ff8b-1faa-4f62-9284-d1281707a9bc
{"cat_id":null,"category_name":null,"id":"ec23ff8b-1faa-4f62-9284-d1281707a9bc"}
category-6c1d
I have display in view but could not store in localstorage for offline propose.where i did wrong, i could not get it.
Record you created should match the SF.model.Offline model.
In your following code
var rec = {
// name is the field name of the `SF.model.Offline` model.
name : record.data.category_name+ ' (from localStorage)'
};
localStore.add(rec);
localStore.sync();
But you see there is no field called name in SF.model.Offline model.
This is how you should do
Models
Ext.define('SF.model.Online', {
extend : 'Ext.data.Model',
config: {
fields: ['cat_id','category_name'],
}
});
Ext.define('SF.model.Offline', {
extend : 'Ext.data.Model',
config: {
fields: ['cat_id','category_name'],
identifier:'uuid',
proxy: {
type: 'localstorage',
id : 'category'
}
}
});
Store
Ext.define('SF.store.Category', {
extend : 'Ext.data.Store',
config : {
model : 'SF.model.Online',
storeId : 'category',
proxy: {
timeout: 3000,
type: 'ajax',
url: 'same url' ,
reader: {
type: "json",
rootProperty: "data"
}
},
autoLoad : true
}
});
In Controller
var onlineStore = Ext.getStore('category'),
localStore = Ext.create('Ext.data.Store', {
model: "SF.model.Offline"
}),
me = this;
localStore.load();
onlineStore.on('refresh', function (store, records) {
localStore.getProxy().clear();
onlineStore.each(function(record) {
//You creating record here, The record fields should match SF.model.Offline model fields
var rec = {
cat_id : record.data.cat_id + ' (from localStorage)',
category_name : record.data.category_name + ' (from localStorage)'
};
localStore.add(rec);
localStore.sync();
});
});
onlineStore.getProxy().on('exception', function () {
me.getNewsList().setStore(localStore);
localStore.load();
Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn);
});
There is a data store in my app that, on a specific user action, gets loaded with a rather large set of data via a local txt file (100kb total). Prior to my upgrade to Sencha 2.2, loading that data set went rather quickly and there was 0 impact on the app performance.
Now that I've upgraded to Sencha 2.2, loading that data freezes the app completely. Even if I'm running the app on my computer, it takes around 5 minutes for the app to unfreeze.
I've tried two approaches: setData() and loading via a proxy (code below). Both approaches have the same result. I've sifted through the Sencha 2.2 changelog and haven't been able to find any relevant changes to data stores. I'm pretty well at a loss here. Any help would be awesome.
Local proxy approach:
Ext.define("addable_exercises", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{ name: 'ex_id'},
{ name: 'ex_name'},
{ name: 'ex_alias'},
{ name: 'ex_type'},
{ name: 'prot_type'}
]
}
});
var all_exercises = Ext.create('Ext.data.Store', {
storeId: 'all_exercises',
model: 'addable_exercises',
proxy: {
type: 'ajax',
url: 'resources/textfiles/datastores/all_exercises.txt'
}
});
Ext.getStore('all_exercises').load()
setData() approach:
Ext.define("addable_exercises", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{ name: 'ex_id' },
{ name: 'ex_name'},
{ name: 'ex_alias'},
{ name: 'ex_type'},
{ name: 'prot_type'}
]
}
});
var all_exercises = Ext.create('Ext.data.Store', {
storeId: 'all_exercises',
model: 'addable_exercises'
});
Ext.Ajax.request({
url: 'resources/textfiles/datastores/all_exercises.txt',
success: function(response, opts) {
var exercise_list = response.responseText;
var all_exercises_store = Ext.getStore('all_exercises');
all_exercises_store.setData(exercise_list);
}
});
Turns out the problem wasn't the actual data store, it was what my code does immediately after loading that store: associating that massive store with a dataview list. In Sencha 2.2, lists are no longer set as infinite by default (which I assume was a performance consideration for short lists), so - as a non-infinite list - it was parsing every list item before displaying anything. With infinite enabled, it lets the items load in the background.
var list = new Ext.dataview.List({
id: 'search_list',
height: 500,
width: 500,
infinite: true,
loadingText:'loading...',
store: 'all_exercises',
itemTpl: [
'<tpl for=".">',
'<div class="feed_item">',
'<div class="avatar">{ex_name}</div>',
'</div>',
'</div>',
'</tpl>'
]
});
I am working in extjs4 using MVC structure and I want to change my proxy setting of api(create) to another url.I am getting stuck at this point.here is my some code
Ext.define('Balaee.model.sn.UserModel',{
extend: 'Ext.data.Model',
//idproperty:'userId',//fields property first position pk.
fields: ['userId','firstName','middleName','lastName','languageId','primaryEmail','birthDate','password','securityQuestionId','securityQuestionAnswer','isMale','creationTime','ipAddress','confirmationCode','userStatusId',],
proxy:
{
type:'ajax',
api:
{
read:'http://localhost/balaee/Balaee/index.php?r=SocialNetworking/user/AuthenticateLogin',
create:'http://localhost/balaee/Balaee/index.php?r=SocialNetworking/user/AuthenticateLogin',
update:'http://localhost/balaee/Balaee/index.php?r=SocialNetworking/user/Registration'
},//end of api
reader:
{
type:'json',
},//end of reader
writer:
{
type:'json',
root:'records',
},//End of writer
}//end of proxy
}
Please give me some suggestion.
You can do something like this with Ext.apply or Ext.applyIf.
var userModel = Ext.create('Balaee.model.sn.UserModel',{}),
proxy = userModel.getProxy();
Ext.apply(proxy.api, {
create : '/controller/new',
read : '/controller/load',
update : '/controller/update',
destroy : '/controller/destroy_action'
});
Am having a form which consists of various text fields and combo boxes, along with a fileupload field. the file is being uploaded successfully, but when am trying to access the other form fields, they are not seen in the post parameters in the firebug. The code for the controller is given below:
uploadFile : function(button) {
**var form = button.up('form');
var Title = form.down('Title');
console.log(Title);** // This returns null
if (form.getForm().isValid()) {
form.getForm().submit({
url : 'data/Downloads.aspx',
waitMsg : 'Saving the file...',
params : {
mode : 'UPLOADFILE',
client : SYSTEM.CLIENT
},
success : function(f, a) {
Ext.Ajax.request({
url : 'data/Downloads.aspx',
params : {
mode : 'SAVE',
fileName : a.result.fileName
},
success : function() {
this.mWin = Ext.create('Campus.view.GenMessage');
this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt2);
},
failure : function() {
}
});
},
failure : function() {
}
})
}
},
How do i access the other form fields and send it to the server.
I don't quite follow what you are doing. You seem to submit the form and then you are doing an ajax call to the server ???
Regardless, all form fields are sent to the server together with the file input. The framework does not use ajax to submit the form as usual because of the file upload, see the docs on this: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
Thanks you for your guidance dbrin.
Actually, i was trying to uplaod a document, and at the same time save the information regarding the file in the database. And, thats why i was trying to make an AJAX request. But, here is what i did:
uploadFile : function(button) {
var form = button.up('form');
if (form.getForm().isValid()) {
form.getForm().submit({
url : 'data/Downloads.aspx',
waitMsg : 'Saving the file...',
params : {
mode : 'UPLOADFILE',
client : SYSTEM.CLIENT
},
success : function(form, a) {
this.mWin = Ext.create('App.view.GenMessage');
this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt1);
},
failure : function() {
}
})
}
},