i am not able to figure out the problem in the following sencha-touch code i have written.
it shows no errors but still when i run it, it doesn't work. are there any more files or classes that the application requires? i am running it on chrome using a linux machine.
var App = new Ext.application({
requires: [
'Ext.tab.Panel' ,'Ext.List', 'Ext.data.Store', 'Ext.data.Model'
],
name : 'notesapp',
useLoadMask : true,
launch : function () {
Ext.regModel('note',{
idProperty:'id',
fields:[{name :'id', type:'int'},
{name : 'date', type: 'date', dateFormat:'c'},
{name : 'title', type: 'string'},
{name : 'narrative' , type:'string'}],
validations:[{type: 'presence', field: 'id'},
{type: 'presence', field: 'title'} ]
});
Ext.regStore('notestore', {
model:'note',
sorters:[{
property:'date',
direction:'DESC'
}],
proxy:[{
type:'localstorage',
id:'notes-app-local-store'
}],
data: [
{ id: 1, date: new Date(), title: 'Test Note', narrative: 'This is simply a test note' }
]
}
);
var notelist= new Ext.List({
id:'notelist',
store:'notestore',
itemTpl:
'<div class= "list-item-title">{title}</div>'
+ '<div class="list-item-narrative">{narrative}</div>'
});
var noteslisttoolbar = new Ext.Toolbar({
id:'noteslisttoolbar',
title:'MyNotes'
});
var noteslistcontainer= new Ext.Panel({
id:'noteslistcontainer',
layout:'fit',
dockedItems:[noteslisttoolbar],
items:[notelist]
});
this.viewport = new Ext.Panel({
fullscreen: true,
layout:'card',
cardAnimation:'slide',
items:[noteslistcontainer]
});
}
})
your getting an error at
proxy:[{
type:'localstorage',
id:'notes-app-local-store'
}],
please check there..
with out that code sencha app running fine
see http://www.senchafiddle.com/#j2f0i
Related
I need to reload my chart's json store automatically on interval of 2 minutes.
This is my code:
tab = new Ext.Panel({
id: "id-" + node.id,
closable: true,
title: node.attributes.text,
layoutConfig: {
columns: 3
},
defaults: {
frame: true,
height: 230,
border: true
},
items: [
new Ext.chart.LineChart({
store: new Ext.data.JsonStore({
url: 'dashboard/CantServicios',
root: 'cantservicio',
autoLoad: true,
ields: ['NOMBRE_SERVICIO', 'CANT']
}),
xField: 'NOMBRE_SERVICIO',
yField: 'CANT',
width: 840
})
]
});
How can I do that ?
You can do this using Ext.util.TaskRunner
http://docs.sencha.com/extjs/3.4.0/?mobile=/api/Ext.util.TaskRunner
So if you look at the sample in the docs link above you should see that you can easily define a function that just performs a load on your store and then it's just a matter of using that in as the run config option.
I'm trying to override the default parameter name for limitParam in proxy for the Store. I want to make a JSONP call to http://search.twitter.com/search.json?q=kathmandu&rpp=2 but instead of setting rpp directly I want to map it to limitParam and set it's value. But it's not setting through limitParam. The reason I'm doing is the parameter keys store sends (sort, dir, etc) do not match the parameters on the server side (which I've no control over). Thanks in advance.
Ext.require('Ext.grid.View');
Ext.require('Ext.util.Point');
Ext.application({
name: 'HelloExt',
launch: function() {
/*Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});*/
console.log('ok1');
Ext.define('Video', {
extend: 'Ext.data.Model',
fields: ['from_user', 'from_user_id']
});
var myStore2 = Ext.create('Ext.data.Store', {
model: 'Video',
storeId : 'restfulStore',
proxy: {
type: 'jsonp',
url : 'http://search.twitter.com/search.json?q=kathmandu',
reader: {
type: 'json',
//root: 'data.items'
root: 'results'
},
limitParam: 'rpp',
pageParam: 'page'
},
listeners: {
load: function(store, records) {
Ext.each(records, function(rec) {
console.log(rec.get('from_user'));
});
}
},
sorters: [{
property: 'from_user',
direction: 'DESC'
}, {
property: 'from_user_id',
direction: 'ASC'
}],
//autoLoad: true,
remoteSort: true
});
var p = myStore2.getProxy();
p.limitParam = 2;
myStore2.load();
console.log('loads anyway??? loaded the store ...');
Ext.create('Ext.grid.Panel', {
title: 'Restful Grid',
store: Ext.data.StoreManager.lookup('restfulStore'),
columns: [
{header: "From User", width: 200, sortable: true, dataIndex: 'from_user'},
{header: "From User ID", width: 200, sortable: true, dataIndex: 'from_user_id'}
],
height: 400,
width: 400,
renderTo: Ext.getBody()
});
console.log('store loaded!!');
}
});
Your proxy configuration is fine for what you want to do. The problem is in the way you load the store. You should not change limitParam which is really the config option for the name of the param. To affect the number of results, use the limit option of the load method, that you can also configure in the store with the pageSize option.
So, remove this:
var p = myStore2.getProxy();
p.limitParam = 2;
And instead, use the limit option when loading the store:
myStore2.load({
limit: 2
});
Alternatively, you can set this in the store config with the pageSize option:
Ext.create('Ext.data.Store', {
// ...
pageSize: 2
,autoLoad: true
});
You can mix both by setting a default with pageSize, and changing it at loading time with limit.
As a side note, the tweeter API doesn't seem to support sorting, so your sorters configuration won't have any effect on the returned results. You should switch remoteSort to false to have the returned results sorted on the client side according to your configuration.
I'm developing a simple login page wherein I need to compare the value that has been entered by any user in username field, with the json data store on click of 'LoginButton'. My question is, can we get the list of username from the json store in an array and compare with textfield values? If so, how?
My nSpaceIndex.html
<html>
<head>
<title>nSpace | Expense / Project Solutions</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
app.js:
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'nSpace',
controllers: [
'nSpaceController'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'loginView'
}
});
}
});
my nSpaceController.js:
Ext.define('nSpace.controller.nSpaceController', {
extend: 'Ext.app.Controller',
stores: [
'Users'
],
views: [
'login.loginView'
],
model: 'loginModel',
init: function() {
this.control({
"#loginButton": {
click: this.onLoginButtonClick
}
});
},
onLoginButtonClick: function(){
//var jsonArray = store.Users.data.items
//console.log(jsonArray);
// I NEED TO GET THE REFERENCE OF MY STORE: USERS TO COMPARE
var logUserName = Ext.getCmp('getUserName').getValue();
var logPassword = Ext.getCmp('getPassword').getValue();
if(logUserName == 'user01' && logPassword == 'password01'){
Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
}
else if(logUserName == 'user02' && logPassword == 'password02'){
Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
}
else{
Ext.MessageBox.show({title: 'OOPS!!!', msg: 'Please Enter Valid Details', icon:Ext.MessageBox.WARNING});
}
},
});
my loginModel.js:
Ext.define('nSpace.model.loginModel', {
extend: 'Ext.data.Model',
fields: ['loginusername', 'password']
});
Users.js:
Ext.define('nSpace.store.Users', {
extend: 'Ext.data.Store',
model: 'nSpace.model.loginModel',
autoLoad : true,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
loginView.js:
Ext.define('nSpace.view.login.loginView' ,{
extend: 'Ext.form.Panel',
alias: 'widget.loginView',
store: 'Users',
title: 'nSpace | Login',
frame:true,
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'User Name',
name: 'loginusername',
id: 'getUserName',
allowBlank: false
},{
fieldLabel: 'Password',
inputType: 'password',
id: 'getPassword',
name: 'password',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Sign Up',
handler: function() {
// location.href = 'signUp.html';
}
},{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Login',
id:'loginButton',
formBind: true, //only enabled once the form is valid
disabled: true,
}],
renderTo: Ext.getBody()
});
users.json:
{
"success": true,
"users": [
{"loginusername": 'user01', "password": 'password01'},
{"loginusername": 'user02', "password": 'password02'}
]
}
inside init function above this.control
try using this..
var store = this.getUsersStore();
store.load({
callback:function(){
var l = store.first();
console.log(l.get("password"));
}
});
this is how you can check
store.each(function(rec){
if (rec.get('password') === value) {
display = rec.get('username');
return false;
}
});
As other users have pointed out, it is trivial to perform authorization on the client side of the application. However you have stated that this is not a concern, therefore I will answer your question without addressing the obvious security flaws of this approach.
I see that you're making use of Ext.getCmp() therefore your components have been assigned an id. This is generally considered to be bad practice as the id property is global, and therefore if there are two components instantiated with the same id, the application will crash. You may find it useful to instead assign the component an itemId and create a reference to easily retrieve the component in the Controller's refs[] definition.
For example:
Ext.define('nSpace.controller.nSpaceController', {
... other store/model/view here ...
refs: [{
name: 'userNameField', // makes magic method 'getUserNameField()'
selector: 'textfield[name=loginusername]',
xtype: 'textfield'
},{
name: 'passwordField', // makes magic method 'getPasswordField()'
selector: 'textfield[name=password]',
xtype: 'textfield'
}],
this.control({ .. observe events here .. });
});
Retrieve a reference to your store, and search for the provided user...
var me = this, // controller
store = Ext.getStore('Users'),
user = me.getUserNameField.getValue(),
pass = me.getPasswordField().getValue(),
success;
// Attempt to find a record matching the provided user/pass
success = store.findBy(function(rec){
return (rec.get('loginusername') === user && rec.get('password') === pass);
});
// Store findBy returns the index, or -1 if no matching record is found
if(success >= 0){
// user/password matched
}else{
// no user/password match found
}
I am trying to use a JSON file to populate a grid but the JSON file is complex.
Below is my JavaScript File and below that is link to my JSON file. Note that the fields I am experimenting with in the JSON file are located at the top.
I have tried everything but I can only get 'server_time' if I remove the 'root' and 'record' from the 'reader', so that proves the it works on some level but I can't get anything else no matter which configuration I try.
Please help me solve this issue. Thanks in Advance!
Link to JSON File LINK
ExtJS Code
Ext.onReady(function(){
Ext.define('Jobs', {
extend: 'Ext.data.Model',
fields: [
{name: 'op_comm_status'},
{name: 'job_category_level_two'},
{name: 'op_description'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Jobs',
proxy: {
type: 'ajax',
url : 'results/company_list.json',
reader: {
type: 'json',
root: 'jobs',
record: 'job'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Status',
dataIndex: 'op_comm_status'
},{
header: 'Category Level Two',
dataIndex: 'job_category_level_two'
},{
header: 'Description',
dataIndex: 'op_description'
}]
});
grid.render(Ext.getBody());
})
Not really a solution, I switched to XML instead and had it working within 5 minutes
try below code :
var proxy = new Ext.data.HttpProxy({url: "your url"});
var reader = new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'count',
id: 'id' });
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
remoteSort: true
});
you can include other attribute as required.
I'm trying to make a DataView work (on Ext JS 2.3).
Here is the jsonStore, which seems to be working (it calls the server and gets a valid response).
Ext.onReady(function() {
var prefStore = new Ext.data.JsonStore({
autoLoad: true, //autoload the data
url: 'getHighestUserPreferences',
baseParams: {
userId: 'andreab',
max: '50'
},
root: 'preferences',
fields: [{
name: 'prefId',
type: 'int'
},
{
name: 'absInteractionScore',
type: 'float'
}
]
});
Then the xtemplate:
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span>
</div>',
'</tpl>',
'<div class="x-clear"></div>'
);
The panel:
var panel = new Ext.Panel({
id: 'geoPreferencesView',
frame: true,
width: 600,
autoHeight: true,
collapsible: false,
layout: 'fit',
title: 'Geo Preferences',
And the DataView
items: new Ext.DataView({
store: prefStore,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
panel.render('extOutput');
});
What I get in the page is a blue frame with the title, but nothing in it.
How can I debug this and see why it is not working?
Your store doesn't match your template, you copied this just from examples didn't you :P
The items in the template, {name} etc refer to fields in the store, which in your case is just prefId and absInteractionScore.
What that example template expects is a name and a url to an image which it then constructs some and an for.