Very often I noticed this pattern in a data component (in the Polymer shop and news demo app):
<script>
(function() {
var categoryList = [
{name: 'top_stories', title: 'Top Stories'},
{name: 'doodles', title: 'Doodles'},
{name: 'chrome', title: 'Chrome'},
{name: 'search', title: 'Search'},
{name: 'shopping_payments', title: 'Shopping & Payments'},
{name: 'nonprofits', title: 'Nonprofits'}
];
var textarea = document.createElement('textarea');
Polymer();
})();
</script>
Is it possible to make an http request firstly to get the categoryList from the remote server and then call Polymer?
Related
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 have a extjs TreePanel that i need to load using json data (cross-domain call) returned from my Ext.data.JsonStore call. That works perfectly. I just cant find a way to use the returned jsonStore to load the treepanel. Any ideas? I am real desperado.
Thanks everyone!
code snippet:
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],
proxy: new Ext.data.ScriptTagProxy({
url: 'http://other.domain/test.aspx'
})
});
// Now i need to use that store to load the tree...
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
loader: new Tree.TreeLoader({ dataUrl: '????' })
//.....
});
Help!
You would have to add a load listener to the store and manually add tree nodes from the loaded data into the tree, the tree does not support stores directly, remember that tree's are hierarchical and stores and pretty flat.
I have some issues with Json result and embed it within the html of the Extjs Panel.
Here's that I have managed to get so far. myPanel is embedded within a mainPanel, and I have some shows/hide of the myPanel in between other sections of my codes.
Ajax request to retrieve Json result like so:
Ext.Ajax.request({
url: 'myStore',
success: function(r) {
var myItem = Ext.decode(r.responseText).itemName;
}
})
I would like to embed the myItem into mypanel, something like this:
var myPanel = new Ext.Panel({
hidden: true,
html:myItem
})
This is where the myPanel is embedded to my mainPanel:
var mainPanel = new Ext.Panel({
applyTo: 'mywizard',
frame: true,
items: [{
id: 'top',
xtype:'panel',
items: [
topPanel1,
topPanel2
]
},{
id: 'middle',
xtype: 'panel',
items: [
middlePanel1,
middlePanel2,
myPanel
]
},{
id: 'bottom',
xtype: 'panel',
items: [
footer
]
});
Currently if I were to run the code, I got a "undefined" within the myPanel, so I supposed that myItem is out of the scope, hence not picked up by myPanel. Hence, I would like to know how/what should I do to be able to get myItem (Json result) reflected in the myPanel?
Thank you.
I found the answer, tested and working for me. For any friends stuck with this. What I need to do is just to update the html content with the body update.
Basically, just grab the middle out of mainPanel such that:
var middle = new Ext.Panel({
id: 'middle',
xtype: 'panel',
items: [
middlePanel1,
middlePanel2,
myPanel
]
})
Of course, you will need to replace the middle back into the mainPanel.
Then, next is to create the myPanel as norm:
var myPanel = new Ext.Panel({
id: 'myPanel',
hidden: true,
html: 'empty'
})
Inside the Ajax request, you update
Ext.Ajax.request({
url: 'myStore',
success: function(r) {
var myItem = Ext.decode(r.responseText).itemName;
var editmycontent = Ext.getCmp('myPanel');
editmycontent.body.update(myItem); // update myItem here
middle.doLayout(); // refresh the changes
}
})
That's it!
you have a syntax error in this part the corrected code look like this :
var myPanel = new Ext.Panel({
hidden: true,
html:myItem // no ; here
});
also you have to be careful about scoping issue, if your code is in a class I would do something like that
Ext.Ajax.request({
url: 'myStore',
success: function(r) {
var myItem = Ext.decode(r.responseText).itemName;
var myPanel = new Ext.Panel({
hidden: true,
html:myItem // no ; here
});
this.parentPanel.add(myPanel);
}
,scope: this // note the set the scope
});