sencha touch mvc demo data does NOT show in my view - extjs

does something wrong with my view.
I can see all .js file load in Network, and station.json load successfully.
But my page does not have any data!!!
I remember it work in ST2.0.0 , but i'm using sencha touch 2.2.1 ,NOT WORKING
any advice will be appreciate. thx.
//app/view/homeview.js
Ext.define('Sencha.view.homeview', {
extend: 'Ext.Panel', //error1 should extend Ext.List
xtype:'homeviewpanel',
alias: 'widget.homeview',
layout:'vbox', //error2 should not have this line ,
config:
{
title:'Home',
iconCls:'home',
cls:'home',
store:'homestore',
itemTpl:'{name}<br/>{age}',
},
initialize: function() {
console.log('initialize home view');
this.callParent(arguments);
}
});
//app/store/homestore.js
Ext.define('Sencha.store.homestore', {
extend: 'Ext.data.Store',
config:{
model: 'Sencha.model.homemodel',
proxy: {
type:'ajax',
url:'data/stations.json',
reader:{
type:'json',
rootProperty:"users"
}
},
autoLoad: true,
}
});
//app/cotroller/maincontroller.js
Ext.define('Sencha.controller.maincontroller',{
extend:'Ext.app.Controller',
launch: function () {
this.callParent(arguments);
}
});
//app.view.viewport.js
Ext.define('Sencha.view.viewport',{
// extend:'Ext.Container',
// requires:['Ext.TabPanel'],
extend:'Ext.TabPanel',
config:{
fullscreen:true,
tabBarPosition:'bottom',
items:[
{
xtype:'homeviewpanel'
},
]
}
});
//app/app.js
Ext.Loader.setConfig({ enabled: true });
// Main application entry point
Ext.application({
name: 'Sencha',
controllers:['maincontroller'],
views:['homeview'],
stores:['homestore'],
models:['homemodel'],
launch: function() {
Ext.create('Sencha.view.viewport');
}
});
//app/model/homemodel.js
Ext.define('Sencha.model.homemodel', {
extend: 'Ext.data.Model',
config:{
idProperty: 'id',
fields:[
{field:'name',type:'string'},//error 3 filed should be name
{field:'age',type:'number'}//error 3 filed should be name
]
}
});
//data/stations.json
{
"code": 1,
"msg": "",
"users": [ {
"id": 1,
"name": "navy",
"age": 18
},
{
"id": 2,
"name": "wade",
"age": 19
}
]
}

I think it doesnt work because homeview extends Ext.Panel, you probably want to extend Ext.List
Hope it helps-

Related

My store is not populating with a simple model data

I have a basic users.json file, a user model and a users store. The size of the store is 0 when I call getCount().
My initial idea was to add a listener for the load event. However, even just calling getStore() returns empty data.
Can you see were I have gone wrong?
{
"users":[
{
"name": "Mike Henderson",
},
{
"name": "Sally Michael",
},
{
"name": "Rory Muldoon",
}
]
}
Ext.define('TP.model.User', {
extend: 'Ext.data.Model',
config: {
fields: ['name']
}
});
Ext.define('TP.store.Users', {
extend: 'Ext.data.Store',
config:{
autoload: true,
model: 'TP.model.User',
storeId: 'Users',
proxy : {
type: 'ajax',
url: 'data/users.json',
reader: {
rootProperty: 'users',
type: 'json'
}
}
}
});
Ext.application({
name: 'TP',
views: ['Main'],
models:['User'],
stores:['Users'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TP.view.Main'));
Ext.getStore('Users').on('load', this.onStoreLoad, this);
console.log(Ext.getStore('Users').getCount());
},
onStoreLoad: function(self, records, success, operation) {
console.log("loaded store");
}
});
I found the solution in the end, it was simple typo.
In the store config - autoload needs to be autoLoad (Capital L)

Sencha error "console is not defined"

I am trying to fetch some post form my WordPress blog in my Sencha application.
But I keep on getting this error "consle is not defined".
Hare is my code for different files.
App.js
Ext.Loader.setPath({
'Ext': 'touch/src',
'ov_app': 'app'
});
Ext.application({
name: 'ov_app',
requires: [
'Ext.MessageBox'
],
profiles: ['Phone', 'Tablet', 'Desktop'],
views: ['Main', 'Eligibelity', 'HeaderBar', 'ListNavigation', 'FooterBar', 'home_button', 'main_navigation', 'Corporateclints', 'Question_form', 'Quick_Enquiry', 'sinlgepost'],
stores: ['NavigationItems', 'GetContent'],
models: ['Items', 'PostContent', 'MainNavigation' ],
controllers: ['MainController'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
ov_app.container = Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},
});
GetContent.js
Ext.define('ov_app.model.PostContent', {
extend:'Ext.data.Model',
config:{
fields: [
{name: 'content'}
]
}
});
GetContent.js
Ext.define('ov_app.store.GetContent', {
extend: 'Ext.data.Store',
config:{
model: 'ov_app.model.PostContent',
autoLoad :true,
proxy:{
type:'jsonp',
url:'http://www.one-visa.com/api/get_post/?id=2798',
reader:{
type:'json',
rootProperty:'post'
},
}
}
});
sinlgepost.js
Ext.define('ov_app.view.sinlgepost', {
xtype:'sinlgepost',
extend:'Ext.Container',
config:{
xtype: 'data',
store: 'getcontent',
itemTpl: '<p>{content}</p>'
}
});
I really not getting any idea what I am doing wrong.
The error "consle is not defined" has clearly pointed out the mistake you've made: if you want to access the console object, its name is console not consle.

how to move data from one page to another page in Senchatouch

I am developing one application in sencha touch, I am new to this technology
first see my code
View-->Main.js
Ext.define('DealsList.view.Main', {
extend: 'Ext.Container',
xtype: 'mainlist',
requires: [
'Ext.TitleBar',
'Ext.Toolbar'
],
config: {
fullscreen:true,
scrollable:false,
layout: {
// type:'fit'
},
items: [
{
xtype: 'toolbar',
//ui : 'green',
docked: 'top',
title: 'SampleDeals'
},
{
xtype:'formpanel',
fullscreen:false,
scrollable:false,
centered:true,
style: 'background-color: gray',
width:'90%',
height:'70%',
items:[
{
xtype:'selectfield',
name:'Grade',
label:'Grade',
options:[
{
text:'All',
value:'Agrade'
},
{
text:'Drink',
value:'Bgrade'
},
{
text:'Entertainment',
value:'cgrade'
},
{
text:'Food',
value:'Dgrade'
}
]
},
{
xtype:'searchfield',
id:'usernametext',
name:'ZipCode',
placeHolder:'ZipCode',
top:'25%'
},
{
xtype:'button',
text:'Gps On/Off',
id:'btnList',
ui:'action',
height:33,
top:'40%',
left:'5%',
right:'5%'
},
{
xtype:'selectfield',
name:'Grade',
label:'Grade',
top:'55%',
options:[
{
text:'2 miles',
value:'Agrade'
},
{
text:'5 miles',
value:'Bgrade'
},
{
text:'10 miles',
value:'cgrade'
},
{
text:'15+ miles',
value:'Dgrade'
}
]
},
{
xtype:'button',
text:'My Favorites',
id:'favbutton',
ui:'action',
width:150,
height:33,
top:'75%',
left:'5%'
}
,{
xtype:'button',
text:'Go',
id:'gobutton',
ui:'action',
width:100,
height:33,
top:'75%',
right:'5%',
handler:this.regButton,
scope:this
}
]
}
]
}
});
view-->ListPage.js
Ext.define('DealsList.view.ListPage', {
extend: 'Ext.List',
xtype: 'listPage',
requires:['Ext.data.Store','Ext.dataview.List','Ext.data.proxy.JsonP'],
config: {
// itemTpl: '<table><tr><td><img src="{imageUrl}" width="70%" height="70%"/></td><td> </td><td><div class=\"list-item-firstname\">{firstName}</div><div class=\"list-item-lastname\">{lastName}</div></td></tr></table>',
itemTpl: ' <table><tr>' +
'<td><img src="{logopath}"/></td>' +
'<td> </td>' +
'<td><div><h3>{subcategoryname}</h3></div>' +
'<div><h1>{specialinfo}</h1></div>' +
'<div>Price:{originalprice}</div>' +
'<div><h1>{fromdate}</h1></div>' +
'</td></tr></table>',
store: 'DetailStore',
onItemDisclosure: true,
items:
[
{
xtype:'toolbar',
title:'SampleDeals',
docked:'top',
items:[
{
xtype:'button',
id:'backbutton',
ui:'back',
text:'back'
}
]
}
]
}
});
view-->DealsDescription.js
Ext.define('DealsList.view.DealsDescription', {
extend: 'Ext.Container',
xtype: 'dealsdescription',
requires:['Ext.Toolbar','Ext.field.Email','Ext.field.Password'],
config: {
fullscreen:true,
scrollable:false,
layout: {
// type:'fit'
},
items: [
{
xtype:'toolbar',
docked:'top',
title:'SampleDeals',
items:[
{
xtype:'button',
id:'backbutton',
ui:'back',
text:'back'
}
]
},
{
xtype:'label',
html: '<h1>{subcategoryname}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'label',
html: '<h1>{dealtimestampfrom}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'label',
html: '<h1>{specialinfo}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'label',
html: '<h1>{originalprice}</h1>'
//html: ["test test"].join("") '',
},
{
xtype:'button',
text:'Button',
id:'xxxbutton',
ui:'action',
top:'30%',
left:'35%',
right:'35%',
handler:this.saveButton
}
]
}
});
Store-->DetailStore.js
Ext.define('DealsList.store.DetailStore', {
extend: 'Ext.data.Store',
config: {
model: 'DealsList.model.DetailModel',
autoLoad: true,
remoteFilter: true,
//sorters: 'leadid',
grouper: {
groupFn: function(record) {
// return record.get('user_id')[0];
return record.get('dealtimestampfrom')[0];
}
},
proxy: {
type: 'ajax',
//url: 'http://113.193.181.53:8081/Test/chat/index.php/chat/onlineusers',
url:'http://www.nomdeal.com/services/getbusinessoffers?catid=All&subcatid=All&lat=17.4418224&lng=78.4752594&dist=1000&userid=100&zipcode=&pagesize=1',
//headers: {'Authorization': 'Basic GVU0IXZ6cFGzczE='},
reader: {
type: 'json',
model: 'DealsList.model.DetailModel',
// rootProperty: 'online-users'
record:'businessholder',
rootProperty: 'specialinfo'
// rootProperty:''
}
}
}
});
Model-->DetailModel.js
Ext.define('DealsList.model.DetailModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: "dealtimestampfrom", type: "string"},
{name: "dealtimestampto", type: "string"},
{name: "subcategoryname", type: "string"},
{name: "specialinfo", type: "string"},
{name: "originalprice", type: "string"},
{name: "logopath", type: "string"},
{name: "fromdate", type: "string"}
]
}
});
Controller-->dealscontroller.js
Ext.define('DealsList.controller.dealscontroller', {
extend: 'Ext.app.Controller',
config: {
refs: {
BtnList:'#btnList',
listPage:'listPage',
mainpage:'mainlist',
backHome:'#backbutton',
goButton:'#gobutton',
DealsDescriptionpage:'dealsdescription'
},
control: {
goButton:
{
tap:'mainCategories'
},
backHome:
{
tap:'backToHome'
},
listPage:
{
itemtap: 'ListItemSelect'
}
}
},
// Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
//called when the Application is launched, remove if not needed
launch: function(app) {
},
mainCategories:function()
{
//alert('sf');
Ext.Viewport.animateActiveItem(this.getListPage(), this.slideLeftTransition);
},
backToHome:function()
{
Ext.Viewport.animateActiveItem(this.getMainpage(), this.slideLeftTransition);
},
ListItemSelect : function (list, index, element, record)
{
Ext.Msg.alert('Alert',record.get('subcategoryname'));
Ext.Viewport.animateActiveItem(this.getDealsDescriptionpage(), this.slideLeftTransition);
}
});
app.js
//<debug>
Ext.Loader.setPath({
'Ext': 'touch/src',
'DealsList': 'app'
});
//</debug>
Ext.application({
controllers: ["dealscontroller"],
name: 'DealsList',
requires: [
'Ext.MessageBox'
],
views: ['Main','ListPage','DealsDescription'],
stores:['DetailStore'],
models:['DetailModel'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function()
{
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var mainPage = {
xtype:'mainlist'
};
var listpage = {
xtype:'listPage'
};
var dealsdescription = {
xtype:'dealsdescription'
};
// Initialize the main view
Ext.Viewport.add(([mainPage,listpage,dealsdescription]));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
In my app's first screen I have a go button. When I click on this button it displays a list(listpage.js) my problem is, when I click on a listitem data is not moving to the nextpage(DealsDescription.js). My requrement is that the data moves to next page and is appended to that xtype:label(DealsDescription.js screen)
Most of us set up a one page application. So you switch cards (or tabs or so...) in staid of refreshing the page. This way you can always get to the data though javascript. Navigating up or down the component tree.
Up:
mycomponent.up() //go up one level
mycomponent.up(selector) //go up till you reach the component meeting the criteria
Down:
mycomponent.query(someComponentQuery) //go down and find all components meeting the criteria
mycomponent.getComponent(componentId) //get the (direct) child with given Id
If you do want to load a new page you need a whole new app.. So you could use session or local storage to transfer data between pages. (use a sessionstorageProxy or localstorageProxy on your store/model).
Basically you have to declare a data holder variable in view's config and while creating this view you can initialize it with whatever data you want.
var myView = Ext.create('DealsList.view.DealsDescription', {
rec : someData //this would contain all data
});
Then in initialize you can access this rec like this:
var data = this.config.rec;
then you can create all internal components and add to this view's container.
var items = [{
xtype:'toolbar',
docked:'top',
title:'SampleDeals',
items:[
{
xtype:'button',
id:'backbutton',
ui:'back',
text:'back'
}
]
},
{
xtype:'label',
html: '<h1>'+data.subcategoryname+'</h1>'
}];
this.setItems(items);

Sencha Touch - Redirect to another view

I am building a Sencha Touch application and struggling with redirecting or changing another view after login. After login i need to take it to Home Page. But my below code in Login Controller's authenticateUser()not working.
Tried with Ext.Viewport.push(homePanel) , Ext.Viewport.setActiveItem(homePanel) also. But nothing works.
LoginView
Ext.define("Mobile.view.LoginView", {
extend: "Ext.form.FormPanel",
alias: "widget.mylogin",
id: 'loginFormPanel',
config: {
name: 'loginform',
frame: true,
url: 'login/Authenticate',
title: 'Login',
items: [
{
xtype: 'fieldset',
itemId: 'LoginFieldset',
margin: '10 auto 0 auto ',
title: '',
items: [
{
//User Name field def
},
{
//Pwd Field Def
}
]
},
{
xtype: 'button',
id: 'loginButton',
text: 'Login',
action: 'login'
}
]
}
});
Login Controller
Ext.define("Mobile.controller.LoginController", {
extend: "Ext.app.Controller",
views: ['LoginView', 'HomeView'],
models: ['UserModel'],
config: {
refs: {
loginForm: "#loginFormPanel"
},
control: {
'button[action=login]': {
tap: "authenticateUser"
}
}
},
authenticateUser: function (button) {
loginForm.submit({
method: 'POST',
success: function (form, result) {
//THIS IS NOT WORKING
Ext.Viewport.add(Ext.create('Mobile.view.HomeView'));
},
failure: function (form, result) {
console.log('Error');
Ext.Msg.alert('Check the logic for login and redirect');
}
});
}
});
Home View
Ext.define('Mobile.view.HomeView', {
extend: 'Ext.Container',
id: 'homescreen',
alias: "widget.homepanel",
config: {
layout: {
type: 'card',
animation: {
type: 'flip'
}
},
items: [
{
xtype: 'toolbar',
docked: 'bottom',
id: 'Toolbar',
title: 'My App',
items: [
{
id: 'settingsBtn',
xtype: 'button',
iconCls: 'settings',
ui: 'plain',
iconMask: true
}
]
},
{
xclass: 'Mobile.view.ActionListView'
}
]
},
});
App.JS
Ext.application({
name: "Mobile",
controllers: ["LoginController", "HomeController"],
views: ['LoginView', 'HomeView', 'ActionListView'],
models: ['UserModel', 'OrganizationModel', 'ActionModel'],
stores: ['OrganizationStore', 'ActionStore'],
launch: function () {
var loginPanel = Ext.create('Ext.Panel', {
layout: 'fit',
items: [
{
xtype: 'mylogin'
}
]
});
Ext.Viewport.add(loginPanel);
}
});
Any one have any idea?
Already referred Load another view after login with sencha touch 2.0 . But there is no answer . Please help
You need create a ref for your HomeView:
refs: {
HomeView: {
autoCreate: true,
selector: 'HomeView',
xtype: 'HomeView'
},
}
And set this view active:
Ext.Viewport.setActiveItem(this.getHomeView());
If you use Sencha Touch 2, you should use Route to redirect to another page. So, it wil be like this:
this.redirectTo('home');
Then create a controller with has a route "home"
FOr more information about routes. http://docs.sencha.com/touch/2-0/#!/guide/controllers-section-4
Try this. may be this work.
authenticateUser: function (button) {
loginForm.submit({
method: 'POST',
success: function (form, result) {
var home= Ext.create('Mobile.view.HomeView');
Ext.getCmp('loginFormPanel').destroy();
Ext.Viewport.add(paneltab);
}

Store is undefine after extjs sdk

my mvc applications works fine. However when i run the sdk. I get store is undefined.
Below the store is defined as "Cutters" I've also tried the full name namespace "Mis.store.Cutters"
I've uploaded the whole file. all-classes.txt
here is my view "Cutter"
Ext.define('Mis.view.Cutter', { extend:'Ext.panel.Panel',
alias:'widget.Cutter',
items:[
{
border:0,
width:950,
layout:{
align:'stretch',
type:'hbox'
},
items:[
{
xtype:'gridpanel',
title:'',
id:'cutterGrid',
name:'cutterGrid',
layout:{
align:'stretch',
type:'hbox'
},
store:'Cutters',
columns:[
{
xtype:'gridcolumn',
dataIndex:'CutterNumber',
text:'Cutter',
flex:1,
sortable: true
}
],
bbar:Ext.create('Ext.PagingToolbar', {
id: 'cutterPagination',
name: 'cutterPagination',
store:'Cutters',
displayInfo:true,
displayMsg:'Displaying records {0} - {1} of {2} ',
emptyMsg:"No records to display "
}
)
}
]
}
],
initComponent:function () {
this.callParent();
}
});
app.js
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('App', '/ext/Cutter/app');
Ext.application({
name: 'Mis',
appFolder: '/ext/Cutter/app',
models: [ 'Cutter', 'Project', 'CutterHistory','Job', 'Part' , 'ClientFinder'],
stores: [ 'Cutters','CutterHistories','Projects', 'Jobs', 'Parts'],
controllers: ['Cutter'],
launch: function () {
Ext.QuickTips.init();
var cmp1 = Ext.create('Mis.view.ViewCutter', {
renderTo: "mis-application"
});
cmp1.show();
}
});
"ViewCutter" this view has reference to "Cutter" which is the view i have the store undefined in.
Ext.define('Mis.view.ViewCutter', {
extend:'Ext.panel.Panel',
height:700,
id:'Cutter',
border: 0,
width:950,
layout:{
align:'stretch',
type:'vbox'
},
title:'',
requires:[
'Mis.view.Cutter',
'Mis.view.EditCutter'
],
initComponent:function () {
var me = this;
Ext.applyIf(me, {
items:[
{
xtype:'panel',
flex:1,
title:'',
items:[
{
xtype:'Cutter',
border:0,
layout:{
type:'column'
}
},
{
xtype:'EditCutter',
border:0,
layout:{
type:'column'
}
}
]
}
]
});
me.callParent(arguments);
}
});
My issue was that i had the store defined on the Pagination.
bbar:Ext.create('Ext.PagingToolbar', {
id: 'cutterPagination',
name: 'cutterPagination',
**store:'Cutters',**
displayInfo:true,
displayMsg:'Displaying records {0} - {1} of {2} ',
emptyMsg:"No records to display "
}
This didn't seem to be an issue before i use the sdk. In hindsight i wish i was using the sdk from the start.

Resources