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() {
}
})
}
},
Related
A contrived example of bi-directional data binding
var user = {
model: function(name) {
this.name = m.prop(name);
},
controller: function() {
return {user: new user.model("John Doe")};
},
view: function(controller) {
m.render("body", [
m("input", {onchange: m.withAttr("value", controller.user.name), value: controller.user.name()})
]);
}
};
https://lhorie.github.io/mithril/mithril.withAttr.html
I tried the above code does not work nothing.
It was the first to try to append the following.
m.mount(document.body, user);
Uncaught SyntaxError: Unexpected token n
Then I tried to append the following.
var users = m.prop([]);
var error = m.prop("");
m.request({method: "GET", url: "/users/index.php"})
.then(users, error);
▼/users/index.php
<?php
echo '[{name: "John"}, {name: "Mary"}]';
Uncaught SyntaxError: Unexpected token n
How do I operate the m.withAttr tutorials code?
Try returning m('body', [...]) from your controller.
view: function (ctrl) {
return m("body", [
...
]);
}
render should not be used inside of Mithril components (render is only used to mount Mithril components on existing DOM nodes).
The example is difficult to operate because it's contrived, it's not meant to be working out-of-the-box. Here's a slightly modified, working version:
http://jsfiddle.net/ciscoheat/8dwenn02/2/
var user = {
model: function(name) {
this.name = m.prop(name);
},
controller: function() {
return {user: new user.model("John Doe")};
},
view: function(controller) {
return [
m("input", {
oninput: m.withAttr("value", controller.user.name),
value: controller.user.name()
}),
m("h1", controller.user.name())
];
}
};
m.mount(document.body, user);
Changes made:
m.mount injects html inside the element specified as first parameter, so rendering a body element in view will make a body inside a body.
Changed the input field event to oninput for instant feedback, and added a h1 to display the model, so you can see it changing when the input field changes.
Using m.request
Another example how to make an ajax request that displays the retrieved data, as per your modifications:
http://jsfiddle.net/ciscoheat/3senfh9c/
var userList = {
controller: function() {
var users = m.prop([]);
var error = m.prop("");
m.request({
method: "GET",
url: "http://jsonplaceholder.typicode.com/users",
}).then(users, error);
return { users: users, error: error };
},
view: function(controller) {
return [
controller.users().map(function(u) {
return m("div", u.name)
}),
controller.error() ? m(".error", {style: "color:red"}, "Error: " + controller.error()) : null
];
}
};
m.mount(document.body, userList);
The Unexpected token n error can happen if the requested url doesn't return valid JSON, so you need to fix the JSON data in /users/index.php to make it work with your own code. There are no quotes around the name field.
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 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'
});
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
How to make a remote connection with database using sencha touch
I mean, how do you connect submitting the form to a remote database ?
How do you get the response from database that your form has been submitted successfully ?
You can do it by making an Ext.Ajax request.
Let's assume that your form has 3 fields:-
Name (textfield)
Password (passwordfield)
Age (numberfield)
You will get those fields values like shown below,
.....
.....
// form code ...
{
xtype:'button',
id:'submitBtn',
text:'Submit',
ui:'confirm',
listeners : {
tap : function() {
var form = Ext.getCmp('form-id');
var values = form.getValues();
Ext.Ajax.request({
url: 'http://www.servername.com/insert.php',
params: values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
}
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
}
}
....
....
Now, at the server side, your insert.php code will make a connection with your database and insert the values & get the response back to the user.
<?php
$con = mysql_connect("server","username","password");
mysql_select_db('database_name',$con);
$insertQry = "INSERT INTO tableName(name,password,age) VALUES ('".$_POST['name']."','".$_POST['password']."','".$_POST['age']."')";
if(mysql_query($insertQry))
{
echo('success');
}
else
{
echo('failure' . mysql_error());
}
?>