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.
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 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 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
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 am new to sencha touch and trying to learn. Build a small app that loads a JSON string from a file. When I run my app on localhost, dataview displays properly, but when I run the same app from my shared hosting account, I get a "loading" graphic in an infinite loop and no data is displayed. You can reproduce the "loading" graphic using this URL:
Reproduce Error
My .js code:
var buglist;
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
Ext.regModel('bugs', {
fields: ['bg_id', 'bg_short_desc', 'bg_reported_date']
});
var productsList = new Ext.DataView({
store: new Ext.data.Store({
model: 'bugs',
proxy: {
type: 'ajax',
url: 'bugs.json',
reader: {
type: 'json',
root: 'd'
}
},
autoLoad: true
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="item">',
'<p>{bg_id}</p>',
'<p>{bg_short_desc}</p>',
'</div>',
'</tpl>'
),
itemSelector: "div.item",
fullscreen: true
});
}
});
My JSON string:
{"d":[{"bg_id":3,"bg_short_desc":"Reports - Efficiency - time from order to shipment","bg_reported_date":"\/Date(1261589913930)\/"},{"bg_id":5,"bg_short_desc":"Remove SKU 375906","bg_reported_date":"\/Date(1262195615067)\/"}]}
Please help.
Thanks
Sajjad
The bg_reported_date, why are you wrapping it in Date()? Just use type: 'date' and dateFormat : 'U' in your field for bg_reported_date Model.
Have you looked at the reponse? Did it return? Error?