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'
});
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.
runs in iOs & Android
coffeeScript
I have a model such as:
exports.definition =
config:
columns:
cookie: "string"
defaults:
cookie: ""
adapter:
# is this valid?
type: "sql"
collection_name: "userInfo"
extendModel: (Model) ->
_.extend Model::,
isSignedIn:->
this.get('cookie').length > 0
Model
And a index.xml:
<Alloy>
<Model id="userInfo" src="userInfo" instance="true"/>
So, this userInfo properties change during the lifecycle of the app, the user logs in, and I want to keep that cookie being persisted as well as auto-loaded on app init.
How do I do that in this framework?
UPDATE another Q&A
For reference here: http://developer.appcelerator.com/question/147601/alloy---persist-and-load-a-singleton-model#255723
They don't explain it well in the appcelerator docs, but if you want to store and retreive properties using build-in alloy properties sync adapter you have to specify a unique "id" when using models. You did it already in the xml markup: <Model id="userInfo" but that will work for that view file only. If you want to access/update this property in the controller you do this:
var UserInfo = Alloy.createModel("userInfo", {id: "userInfo"});
UserInfo.fetch();
UserInfo.set("cookie", "new value");
UserInfo.save();
If you want to keep the reference to this property thruout the code, I believe, you just attach it to the global namespace in the alloy.js:
var UserInfo = Alloy.createModel("userInfo", {id: "userInfo"});
UserInfo.fetch();
Alloy.Globals.UserInfo = UserInfo;
In the controllers you do:
var UserInfo = Alloy.Globals.UserInfo;
Put your model userInfo.js into app/model, it will probably look like this:
exports.definition = {
config : {
"columns" : {
"cookie" : "string"
},
"defaults" : { "cookie" : "" }
"adapter" : {
"type" : "sql",
"collection_name" : "userInfo"
}
},
extendModel : function(Model) {
_.extend(Model.prototype, {
isSignedIn : function() {
this.get('cookie').length > 0
}
});
return Model;
},
extendCollection : function(Collection) {
_.extend(Collection.prototype, {
});
return Collection;
}
}
From here it depends on what you want to do, but you can easily fetch the model from the collection userInfo, just put this: <Collection src="userInfo"/> in your xml file.
As a side note, I usually just use the Titanium.App.Properties stuff to store user information. Properties are used for storing application-related data in property/value pairs that persist beyond application sessions and device power cycles. For example:
// Returns the object if it exists, or null if it does not
var lastLoginUserInfo = Ti.App.Properties.getObject('userInfo', null);
if(lastLoginUserInfo === null) {
var userInfo = {cookie : "Whatever the cookie is", id : "123456789"};
Ti.App.Properties.setObject('userInfo', userInfo);
} else {
// Show the cookie value of user info
alert(lastLoginUserInfo.cookie);
}
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
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() {
}
})
}
},
Attached is a my controller file .. i basically want to switch views .. adding and removing a panel in a container with 2 buttons .. in the method for home and popular button i am using Ext.create again and again wouldnt that overload my application becoz iam not destroying my views iam adding and removing them .. My main question is how can i create global var 's for this situation like i create var homepanel = Ext.create just once and then i can reuse that var when i want to remove or add it from my mainContainer.. need serious guidance on this .. searched the whole documention but i dont have any clue about it
Ext.define('app.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
refs: {
homeBtn: '#homeBtn',
popularBtn: '#popularBtn',
homePanel: '#homePanel',
mainContainer: '#mainContainer'
},
control: {
homeBtn:{
tap: 'homeBtnAction'
},
popularBtn:{
tap: 'popularBtnAction'
}
}
},
launch: function(app) {
this.callParent(arguments);
console.log("main launched");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
mainCont.add(homepanel);
console.log("homePanelAdded");
},
homeBtnAction: function(){
console.log("home page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(popularpanel);
mainCont.add(homepanel);
},
popularBtnAction: function(){
console.log("popular page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(homepanel);
mainCont.add(popularpanel);
}
});
NOTE: Iam using Ext.define to create my views and using MVC structure.
Use this,
var homepanel = this.getHomePanel() || Ext.create('app.view.Home.HomePanel');
if this.getHomePanel() does not return anything it'll create the panel for you. After that you'll use the already created panel.
Other note, unless you are manipulating the buttons in some manner there is no need to give them an id or a ref.
Set up your button in your view like so
{
xtype : 'button',
text : 'Home Panel',
action : 'goHome'
}
then in the control section of your controller use this
'button[action=goHome] :
{
tap: 'homeBtnAction'
}
One option is : in "launch", you create both views (with Ext.Create) and use Ext.getCmp in action button callbacks to retrieve the previously created views.