Sencha touch 2.2 sql proxy not inserting data - extjs

I successfully tried sencha touch app example showed here
They are using store proxy type as localstorage, its working good and then i changed the proxy type to sql as shown below
Ext.define('notesApp.store.Notes', {
extend : 'Ext.data.Store',
requires : 'Ext.data.proxy.Sql',
config : {
model : 'notesApp.model.Note',
proxy : {
type : 'sql',
database: "SqlProxyTest",
table: "Notes",
id : 'notes-app-store'
},
sorters : [{property : 'dateCreated', direction : 'DESC'}],
grouper : {
sortProperty : 'dateCreated',
direction : 'DESC',
groupFn : function(record) {
if(record && record.data.dateCreated) {
return record.data.dateCreated.toString();
}
return '';
}
}
}
});
There is no error.
I can insert data and i can see the record in list view, but chrome resource showing "The Node table is empty".
If i refresh the browser the record is gone from the list.
Am i missing anything or is it right way to use sql proxy in sencha touch ?

If you have change your model (add a field) you have to drop the table and recreate it.
And when you add a new row on your datastore be sure to put all fields.
Example if i have a model with firstName, lastName, email :
// This one is not added cause email is absent
Ext.getStore('Users').add([{
firstName: 'Toto',
lastName: 'test',
}]);
// This one is added
Ext.getStore('Users').add([{
firstName: 'toto',
lastName: 'test',
email : 'toto#test.te'
}]);

The mistake i did was, i created id for the record i am trying to insert as they showed in that demo example, when i changed below model from
Ext.define("NotesApp.model.Note", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'dateCreated', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'narrative', type: 'string' }
]
}
});
to
Ext.define('notesApp.model.Note', {
extend : 'Ext.data.Model',
config : {
fields : [
{ name : 'dateCreated', type : 'string', dateFormat : 'D'},
{ name : 'title', type : 'string'},
{ name : 'narrative', type : 'string'}
],
validations : [
{type : 'presence', field : 'dateCreated'},
{type : 'presence', field : 'title', message : 'Please enter a title for the note!'}
]
}
});
Everything works fine.

Related

Is it possible to have multiple hasMany relationships using the same model?

I have a situation where I have a model meant to store several lists of chemicals. The chemical model is the same for each of the hasMany relationships.
I need something like this:
Ext.define('HandSurvey.model.ChemicalRisks', {
extend: 'Ext.data.Model',
requires: ['Ext.data.identifier.Uuid'],
config: {
idProperty: 'id',
identifier: 'uuid',
fields: [
{ name: 'id', type: 'auto' }
],
associations: [
{
type: 'hasMany',
model : 'HandSurvey.model.SpecificChemical',
name : 'fiberglassResins',
store : {
type: 'sql'
}
},
{
type: 'hasMany',
model : 'HandSurvey.model.SpecificChemical',
name : 'paintsStains',
store : {
type: 'sql'
}
},
],
proxy: {
type: 'sql'
}
}
});
But this would cause each list to bind to every SpecificChemical that belongs to the ChemicalRisks model, not just the ones meant to belong to that hasMany. It seems as though I would need to join on multiple fields
Is it possible to do this? Or do I have to make a bunch of the exact same models/stores with different names?
sure you can!
use associationKey and the autogenerated stores of the associations
associations: [
{
type: 'hasMany',
model : 'HandSurvey.model.SpecificChemical',
name : 'fiberglassResins',
associationKey : 'fiberglassResins'
},
{
type: 'hasMany',
model : 'HandSurvey.model.SpecificChemical',
name : 'paintsStains',
associationKey : 'paintsStains'
},
]
Given a response like this: {
"response" : {
"fiberglassResins": [
{
"id" : 1
"name" : "Polyester"
},
{
"id" : 2
"name" : "E-Glass"
}
],
"paintsStains": [
{
"id" : 1
"name" : "item1"
},
{
"id" : 2
"name" : "item2"
}
]
}
}
Then you bind your main model to a store lets say ItemsStore.
IMPORTANT each record of ItemsStore will get autogenerated by Sencha: fiberglassResinsStore and paintsStainsStore.
Yo can console.log() each record to see the actual stores.

Creating a model for two jsonarray

demoAlerts({
itemstatus: [
{
item: "1",
name: "apple",
type: "fruit"
},
{
item: "2",
name: "pine",
type: "fruit"
}
],
deliverystatus: [
{
name: "james",
status: "yes"
},
{
name: "thomas",
status: "no"
},
]
});
I have two array (itemstatus and deliverystatus), I need to create the model for this store. what I tried is
ParentModel:
Ext.define('test.model.ParentModel', {
extend: 'Ext.data.Model',
requires:['test.model.ItemModel','test.model.DeliveryModel'],
autoLoad: true,
config : {
fields : [ 'itemstatus', {
name : 'demostatuslist',
model : 'demoAlerts.model.ItemModel',
mapping : 'itemstatus'
},
'portalstatus', {
name : 'deliverystatus',
model : 'test.model.DeliveryModel',
mapping : ' deliverystatus'
}]
}
});
ItemModel
Ext.define('demoAlerts.model.ItemModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'item', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' }
]
}
});
DeliveryModel
Ext.define('demoAlerts.model.DeliveryModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'name', type: 'string' },
{ name: 'status', type: 'string' },
]
}
});
Whether i properly configured the model. I am receiving the store as empty
Use Associations :) http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.association.Association
In this case I would have a Model with 2 hasMany associations like this:
Ext.define('demoAlerts.model.ContainerModel', {
extend : 'Ext.data.Model',
requires : [
'demoAlerts.model.DeliveryModel',
'demoAlerts.model.ItemModel'
],
config : {
associations: [
{
type : 'hasMany',
model : 'demoAlerts.model.DeliveryModel',
associationKey : 'deliveryStatus',
name : 'deliveryStatus',
autoLoad : true // this is very important
},
{
type : 'hasMany',
model : 'demoAlerts.model.ItemModel',
associationKey : 'itemStatus',
name : 'itemStatus',
autoLoad : true // this is very important
}
]
}
});
Then use a store SomeStore binded to ContainerModel.
IMPORTANT Each record in SomeStore will have deliveryStatusStore and itemStatusStore AUTOGENERATED.
Read about associations.
Neither http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.Field
nor http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.field.Field
knows a valid config option "model" for a field.
As far as I know, there is no such thing as a "Parent Model" available in ExtJS or Sencha Touch.
As far as I know, there is no possibility to have two stores in one.
You can load two (or more) stores using only one call to the server like in my following example:
firststore.on('load',function() {
secondstore.loadRawData(firststore.getProxy().getReader().rawData);
});
firststore.load()
Where you would give firststore the server url and the root of the data that goes into the first store, and secondstore will have the root of the data that goes into the second store.
Please be aware that the second store won't be filled if zero records go into the first store, and choose your stores appropriately.
If any of your stores can be the only empty store, perhaps you will have to get the rawdata via Ext.data.Request and load it into all stores afterwards.

Multiple Stores Loading Issue Sencha Touch

I have two Stores 'Polls' and 'Choices' with respective models as 'Poll' and 'Choice'
models
Poll
Ext.define('PollsTest.model.Poll', {
extend: 'Ext.data.Model',
xtype : 'poll',
config: {
fields: [
{ name: 'title'},
{ name: 'uri' },
],
hasMany :
[
{
model : 'PollsTest.model.Choices',
name : 'Choices',
primaryKey : 'title',
foreignKey : 'title',
foreignStore : 'Choices'
}
]
}
});
Choice
Ext.define('PollsTest.model.Choice', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'choice', type: 'auto' },
{ name: 'votes', type: 'auto' },
{name : 'title', type: 'auto'},
{name : 'uri', type : 'auto'}
],
belongsTo : {
model : 'PollsTest.model.Choices',
name : 'Choices',
primaryKey : 'title',
foreignKey : 'title',
foreignStore : 'Choices',
getterName: 'getChoices',
setterName: 'setChoices'
}
}
});
Stores
Polls
Ext.define('PollsTest.store.Polls',{
extend : 'Ext.data.Store',
alias : 'store.pollStore',
//xtype:'pollStore',
requires :
[
'PollsTest.model.Poll',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config :
{
autoLoad : true,
model : 'PollsTest.model.Poll',
storeId :'pollStore',
listeners :
{
load : function(store, records)
{
console.log('store loaded',records);
}
},
//storeId : 'pollstore',
proxy :
{
type : 'jsonp',
url : 'http://localhost/polls',
reader :
{
type : 'json',
rootProperty : 'polls'
}
}
},
});
Choices
Ext.define('PollsTest.store.Choices',{
extend : 'Ext.data.Store',
alias : 'store.choiceStore',
requires :
[
'PollsTest.model.Choice'
],
config :
{
autoLoad : false,
model : 'PollsTest.model.Choice',
storeId :'choiceStore',
listeners :
{
load : function(store, records)
{
console.log('choice store loaded',records);
}
},
proxy :
{
type : 'jsonp',
url : '',
reader :
{
type: 'json',
rootProperty : 'choices'
}
}
},
});
So from Polls store I can populate my List and upon clicking the list item the controller pushes the detail panel to the view. The Choices Store will populate based on the tap event occurred on the list. So the problem is I have to push the details panel to the view only after loading the Choices Store
How can I do that?? Suggestions are appreciated.
and My controller will look like this
Ext.define('PollsTest.controller.MainController', {
extend: 'Ext.app.Controller',
requires : ['PollsTest.controller.ChoiceController'],
config: {
refs: {
mainController : 'mainpanel',
controller_list : 'pollslist',
details_controller : 'pollsdetails'
},
control: {
controller_list :
{
itemtap : 'ShowPoll'
},
}
},
ShowPoll : function (list, index, target, record, e, eOpts)
{
var tochoice = record.data.uri;
var main_path = 'http://localhost';
var choices_url = main_path+tochoice;
var choice_store_object = Ext.getStore('choiceStore');
choice_store_object.getProxy().setUrl(choices_url);
choice_store_object.load();
console.log(choice_store_object.getCount());
/* var choices_store_object = Ext.create('PollsTest.store.Choices');
var checking = choices_store_object.on('load',function(){return true;});
if(checking==true) --> didn't work no detail panel pushing is happening but the order of loading the stores works fine here.
{
*/ console.log('before pushing');
this.getMainController().push({xtype : 'pollsdetails',data : record.data });
console.log('after Pushing');
// }
//this.getApplication().getController('ChoiceController').onDetailsShow(this,record,tochoice);
}
});
You can pass a callback function in your choice store load function. The callback function will be executed after the store has loaded.
choice_store_object.load(function(records, operation, success) {
// push the pollsdetails view here
}, this);
This is how I `i have implemented
var choices_store_object = Ext.create('PollsTest.store.Choices');
var checking =choice_store_object.load(function(records, operation, success)
{
console.log('before pushing');
this.getMainController().push({xtype : 'pollsdetails',data : record.data });
console.log('after Pushing');
}, this);
`

Ext.data.LocalStorage not working on Offline Mode

Im now studying Sencha Touch 2 and doing some Research on Ext.data.LocalStorage that can be use in Offline Mode.
I tried to follow this turorial
Sencha Touch 2 Local Storage
and just updated the code from Github - RobK/SenchaTouch2-LocalStorageExample or riyaadmiller/LocalStorage and modified Store url using my own WCF Rest
but i cant get LocalStorage working on offline mode.I have no issue on running the app Online. I also tried to debug it on Chrome developer tool but LocalStorage always get 0 data. I used Chrome/Safari Browser and also build the apps as Android using Phonegap build and still not working.
Did I miss something?
Does anyone can provide the details to deal with this Issue.
Below is my code:
Store:
Ext.define('Local.store.News', {
extend:'Ext.data.Store',
config:{
model: 'Local.model.Online',
proxy:
{
type: 'ajax',
extraParams: { //set your parameters here
LookupType: "Phone",
LookupName: ""
},
url: 'MY WCF REST URL',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader:
{
type: 'json'
, totalProperty: "total"
},
writer: { //Use to pass your parameters to WCF
encodeRequest: true,
type: 'json'
}
},
autoLoad: true
}
});
Offline Model:
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});
Online Model:
Ext.define('Local.model.Online', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "Name", type: "string" },
{ name: "Description", type: "string" }
]
}
});
Controller:
Ext.define('Local.controller.Core', {
extend : 'Ext.app.Controller',
config : {
refs : {
newsList : '#newsList'
}
},
/**
* Sencha Touch always calls this function as part of the bootstrap process
*/
init : function () {
var onlineStore = Ext.getStore('News'),
localStore = Ext.create('Ext.data.Store', { storeid: "LocalNews",
model: "Local.model.Offline"
}),
me = this;
localStore.load();
/*
* When app is online, store all the records to HTML5 local storage.
* This will be used as a fallback if app is offline more
*/
onlineStore.on('refresh', function (store, records) {
// 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.name + ' (from localStorage)' // in a real app you would not update a real field like this!
};
localStore.add(rec);
localStore.sync();
});
});
/*
* If app is offline a Proxy exception will be thrown. If that happens then use
* the fallback / local stoage store instead
*/
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
});
}
});
View:
Ext.define('Local.view.Main', {
extend : 'Ext.List',
config : {
id : 'newsList',
store : 'News',
disableSelection : false,
itemTpl : Ext.create('Ext.XTemplate',
'{Name}-{Description}'
),
items : {
docked : 'top',
xtype : 'titlebar',
title : 'Local Storage List'
}
}
});
Thanks and Regards
1) First of all when you creating record and adding into store, the record fields should match the model fields of that store.
Here you creating record with field name, but Local.model.Offline didn't name field
var rec = {
name : record.data.name + ' (from localStorage)'
};
This is what you need to do within refresh
localStore.getProxy().clear();
// Also remove all existing records from store before adding
localStore.removeAll();
store.each(function(record) {
console.log(record);
var rec = {
ID : record.data.ID,
LookupName : record.data.Name + ' (from localStorage)',
LookupDescription : record.data.Description
};
localStore.add(rec);
});
// Don't sync every time you add record, sync when you finished adding records
localStore.sync();
2) If specify idProperty in model which is using localStorage, then record will not be added into localStorage.
Model
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
// idProperty removed
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});

TreePanel Error : Uncaught TypeError: Cannot call method 'substring' of undefined

I've a problem while rendering TreePanel. I'm using MVC structure, here's my definition:
(By the way I don't use dynamic loading, included ext-all-debug.)
Menu - Model
Ext.define('RIA4.model.Menu', { extend : 'Ext.data.Model',
idProperty : 'menuId',
fields : [
{ name : 'menuId', type : 'int' },
{ name : 'menuName', type : 'string' },
{ name : 'sourcePath', type : 'string' },
{ name : 'active', type : 'boolean', defaultValue : true },
{ name : 'leaf', type : 'boolean' }
]
});
TreeStore
Ext.define('RIA4.store.Menus', { extend : 'Ext.data.TreeStore',
model : 'RIA4.model.Menu',
proxy : {
type : 'ajax',
api : {
read : 'menu/view.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success'
}
},
autoLoad : true
});
TreePanel
Ext.define('RIA4.view.menu.MenuTree', { extend : 'Ext.tree.Panel',
alias : 'widget.menutree',
//requires : [],
title : 'Menu List',
store : 'Menus',
rootVisible : false,
root : {expanded: true, text: "", "data": []}
});
I'll be happy if someone can help me?
Thanks in advance..
Haven't you forgotten to add the following line to controller's config:
views: [ 'menu.MenuTree' ],

Resources