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.
Related
"Uncaught Error: The following classes are not declared even if their files have been loaded: 'Ext.data.model'. Please check the source code of their corresponding files for possible typos: 'touch/src/data/model.js "
I am getting this error which I have no idea why is being generated. Here is my code have a look because i have turned every stone But still no answer. It seems every tiem i write a code few hours goes to figuring out what is wrong with sencha touch
App.js
//<debug>
Ext.Loader.setPath({
'Ext': 'touch/src',
'TutsPlus': 'app'
});
//</debug>
Ext.application({
//http://docs.sencha.com/touch/2-1/#!/api/Ext.app.Application
name: 'TP',
views: ['Main'],
models: ['mtask'],
stores: ['stask'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TP.view.Main'));
}
});
In Store stask.js
Ext.define('TP.store.stask', {
extend: 'Ext.data.Store',
config: {
//Define which model we are going to use for our store
model: 'TP.model.mtask',
data: [
{label: 'Make the change'},
{label: 'Take the trash'},
{label: 'Clear the room'},
{label: 'Wake Up Early'}
]
}
});
In Model mtask.js
Ext.define('TP.model.mtask', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'label', type: 'string'},
{nae: 'done', type: 'boolean', defaultValue: false}
]
}
});
In view folder Main,js
Ext.define('TP.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.dataview.List'
],
config: {
layout: 'vbox',
items: [
{
docked: 'top',
xtpe: 'titlebar',
title: 'Note Taker',
items: [
{
iconCls: 'add',
iconMask: true,
align: 'right',
id: 'add-button'
}
]
},
{
xtype: 'list',
store: 'stask'
}
]
}
});
For some reason, your model class is not getting declared. Try finding out the reason with syntax errors and cases.
Try changing:
nae: 'done' to name: 'done'
I have a grid linked to a store with autoLoad: true. The problem is that the store gets loaded on application launch, even if the view is created only later when accessed through a menu.
I have referenced the store in Application.js and in the view, but I'm not instatiating explicitly neither the store nor the view.
I don't know how to achieve that the store is loaded only when needed by the view.
If I set autoLoad: true, the store gets loaded on application launch.
If I set autoLoad: false, the store doesn't get loaded at all.
I know this is pretty basic, but I'm stuck so far.
Here is all the relevant code for reference:
app/store/Owners.js
Ext.define('Mb.store.Owners', {
extend: 'Ext.data.Store',
model: 'Mb.model.Owner',
autoLoad: true,
proxy: {
...
});
Application.js
Ext.define('Mb.Application', {
name: 'Mb',
extend: 'Ext.app.Application',
models: [
'Owner'
],
stores: [
'Owners'
],
...
app/view/Owners.js
Ext.define('Mb.view.winbiz.Owners', {
extend: 'Ext.grid.Panel',
alias: 'widget.test-gridPanel',
store: 'winbiz.Owners',
columns: [{
...
The view is instantiated in the controller:
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
init: function(){
this.control({
'menu #test': {click: this.onMenuTest},
})
},
onMenuTest: function(){
this.getController('Main').addToMainTab('test-gridPanel');
},
You can add render handler to view which will call store load method and disable autoLoad.
Example listener:
Ext.define('Mb.view.winbiz.Owners', {
extend: 'Ext.grid.Panel',
[...],
initComponent: function(){
this.callParent();
this.on('render', this.loadStore, this);
},
loadStore: function() {
this.getStore().load();
}
});
I would let the view's controller handle the store load.
Start by disabling autoload on the store.
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
ownerStore: null,
init: function(){
this.control({
'menu #test': {click: this.onMenuTest},
});
this.ownerStore = Ext.getStore('winbiz.Owners');
},
onMenuTest: function() {
if (this.ownerStore.loaded === false) {
this.ownerStore.load(
scope: this,
callback: this.onOwnerStoreLoaded
);
}
else {
this.addToTab();
}
},
onOwnerStoreLoaded: function (store, records, successful, eOpts) {
if (successful) {
store.loaded = true;
this.addToTab();
}
},
addToTab: function () {
this.getController('Main').addToMainTab('test-gridPanel');
}
Wheter you want to change the view before or after the store is loaded is another question.
This is my final controller code:
Ext.define('Mb.controller.Winbiz', {
extend: 'Ext.app.Controller',
views: [
'Owners'
],
refs: [{ref: 'testGrid', selector: 'test-gridPanel'}],
init: function(){
this.listen({
store: {
'#Owners':{ load: this.onOwnersLoad}
}
})
this.control({
'menu #test': {click: this.onMenuTest},
'test-gridPanel': {render: this.onOwnersRender}
})
},
onMenuTest: function(){
this.getController('Main').addToMainTab('test-gridPanel');
},
onOwnersLoad: function(store){
store.loaded = true
},
onOwnersRender: function(){
var store = this.getTestGrid().getStore();
if(!store.loaded)store.load();
},
It puts all code into the controller as suggested by #pcguru and uses the render event to shorten the code as suggested by #Lolo. Thanks
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-
I cannot figure out how to show my Ext.dataview.List object inside of another object. If I try to show the Ext.dataview.List object in the viewport, by itself, I can see my data. But if I try to include it as a component inside of another component, it thinks there is no data (judging from the HTML output), and doesn't appear to display anything.
So, if I have an app.js with the following code:
Ext.application({
name: 'MobileUnion',
views: ['LocalsList'],
models: ['Local'],
stores: ['Locals'],
launch: function() {
// Initialize the main view
var mainView = {
xtype: 'localslist'
};
Ext.Viewport.add([mainView]);
}
});
I can set up MobileUnion.view.LocalsList this way, which results in no list:
Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.Container',
alias: 'widget.localslist',
requires: 'Ext.dataview.List',
config: {
items: [
{
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
]
}
});
Or, I can set it up this way, which results in a populated list, but not inside of another component:
Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.dataview.List',
alias: 'widget.localslist',
config: {
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
});
The reason I am trying to pull this off is so that I can get a list component to display inside of a tab panel.
Note: I have assembled a Fiddle with everything, here: http://www.senchafiddle.com/#6nCH8
I must be missing something basic, but at this point, having gone through the documentation, and purchased two books, one of which I've read fully, and the other of which I am reading while coding, I am still without an answer. Any help would be most greatly appreciated.
Additional Code
app/model/Local.js
Ext.define('MobileUnion.model.Local', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'dateCreated', type: 'date', dateFormat: 'c' },
{ name: 'localName', type: 'string' },
{ name: 'designation', type: 'string' }
],
}
});
app/store/Locals.js
Ext.define('MobileUnion.store.Locals', {
extend: 'Ext.data.Store',
requires: ['MobileUnion.model.Local'],
config: {
model: 'MobileUnion.model.Local',
data: [
{ localName: 'ABCD', designation: '123' },
{ localName: 'WXYZ', designation: '456' }
],
autoLoad: true,
sorters: [{ property: 'dateCreated', direction: 'DESC'}]
}
});
In option 1, you define a container but you actually don't add items to you container. To add your list to the container, add xtype: 'list' to your items array. Next thing you have to do is to set the containers layout to fit, otherwise the list won't show up. This should work for you:
Ext.define('MobileUnion.view.LocalsList', {
extend: 'Ext.Container',
alias: 'widget.localslist',
requires: 'Ext.dataview.List',
config: {
layout: {
type: 'fit' //set containers layout
},
items: [
{
xtype: 'list', //add xtype
itemId: 'localsList',
store: 'Locals',
loadingText: 'Loading Locals...',
emptyText: '<div>No locals found.</div>',
onItemDisclosure: true,
itemTpl: '<div>{localName}</div><div>{designation}</div>'
}
]
}
});
More about layouts in Sencha: http://docs.sencha.com/touch/2-1/#!/guide/layouts
Good luck!
Using extjs 4 I get an error when attempting to use a view in my viewport. I think it is an issue with how the view is defined/where it is included. However, I can';t find what I've done wrong. I know this is an easy mistake, I just don't see it. I'll post the code below. Error is
TypeError: name is undefined
View I want to use:
Ext.define('MC.view.SideBar', {
extend: 'Ext.Container',
alias: 'widget.SideBar',
items:[
{ xtype: 'panel',
bodyPadding: 5,
html:'facebook'
},
{ xtype: 'panel',
bodyPadding: 5,
html:'twitter?'
}
]
//... more configuration ...
});
Viewport
Ext.create('Ext.container.Viewport', {
layout: {
//align:'center',
pack:'center',
type:'hbox',
align:'stretch',
border:true
},
items: [
{xtype:'panel',
layout:{
type:'vbox',
align:'stretch',
pack:'start'
},
border:true,
width: '80%',
items:[
{xtype:'panel',
border:true,
flex:2,
//width:'100%',
html:'toolbar/logo'
},
{xtype:'panel',
border:true,
flex:8,
layout:{
type:'hbox',
align:'stretch',
pack:'start'
},
items: [
//{xtype:'SideBar'},
**{xtype:'SideBar',**
flex:22,
height:'100%'
},
{xtype:'panel',
flex:88,
height:'100%'
}
],
html:'lower'
}
]
}
]
});
Controller where views are referenced
Ext.define('MC.controller.Monolith', {
extend: 'Ext.app.Controller',
views: [
'TopBar', 'SideBar'
],
init: function() {
console.log('Initialized Monolith controller! This happens before the Application launch function is called');
}
});
Finally the application file
Ext.application({
name: 'MC',
//appFolder: 'app',
autoCreateViewport: true,
controllers: [
'Monolith'
],
//models: [],
//stores: [],
launch: function() {
console.log('mesacart');
// This is fired as soon as the page is ready
}
});
I've tried everything I can think of, but it must be simple since there isnt much code here yet....
For views and controllers you don't need to specify their 'MC.controller' and 'MC.view' prefix when declaring them.
So you end up with:
views: [
'TopBar', 'SideBar'
],
and so on.
EDIT:
when you ask to auto create the viewport you need to define a viewport class as MC.view.Viewport
See your full code example in jsfiddle:
http://jsfiddle.net/dbrin/qW4hR/
Ext.define('MC.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: {...}