PDA

View Full Version : EXTJS 4.2.1 Unable to render or load Views



rajuarien
29 Sep 2013, 6:51 PM
New bee in EXT JS , this MVC code doesnt load View. If you observe the browser console the initComponent for the EventList if never reached.

Ext.define('wl.view.EventList', {
extend: 'Ext.panel.Panel',
alias: 'widget.eventlist',
html:'<b>Hello</b>',
initComponent: function () {
//my complete sudoku js file here
console.log("wl.view.EventList > initComponent() ");

app.js
=====
Ext.application({
name: 'wl',
appFolder: '/components',
autoCreateViewport: true,

controllers: ['Event']
});


Viewport.js
=========
Ext.define('wl.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',


requires: [
'wl.view.EventList'
],


initComponent: function () {
console.log("wl.view.Viewport > initComponent() ");
this.callParent();
}
});


--Controller
Ext.define('wl.controller.Event', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'eventList'
}],


init: function () {
console.log("wl.controller.Event > controller init()");
},
onLaunch: function () {
console.log("wl.controller.Event onLaunch()");
}
});


--View
Ext.define('wl.view.EventList', {
extend: 'Ext.panel.Panel',
alias: 'widget.eventlist',
html:'<b>Hello</b>',
initComponent: function () {
//my complete sudoku js file here
console.log("wl.view.EventList > initComponent() ");
this.callParent();
}
});

evant
29 Sep 2013, 7:00 PM
You never use the EventList view. You require it, but you never nest it as part of the viewport. Look at the /app/simple example.

rajuarien
30 Sep 2013, 6:11 AM
Thanks . Reailized it .

rajuarien
30 Sep 2013, 7:48 PM
Trying to integrate XTemplate and MVC on EXT JS 4, The problem is everything works with "data" in the eventList. but not with store: 'Events', What could be the issue ?

//App.js
Ext.application({
name: 'wl',
appFolder: '/components',
autoCreateViewport: true,

controllers: ['EventController'],
models: ['Event'],
stores: ['Events']
});


//ViewPort
Ext.define('wl.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',


requires: [
'wl.view.EventList'
],


initComponent: function () {
console.log("wl.view.Viewport > initComponent() ");
this.items = {
items: [{
xtype: 'eventlist',
flex: 1
}]
};
this.callParent();
}
});


//EventController
Ext.define('wl.controller.EventController', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'eventList'
}],


stores: ['Events'],

init: function () {
console.log("wl.controller.EventController > controller init()");
},
onLaunch: function () {
console.log("wl.controller.EventController onLaunch()");
}
});


//data/events.json
{
'success': true,
'results': [
{ "name": "miss america 2013", "imageurl": "ballet.jpg", "description": "Miss America 2013 event" },
{ "name": "yanni acroplis", "imageurl": "corporateevent.jpg", "description": "Yanni in france" },
{ "name": "ipad mini product launch", "imageurl": "fashionlaunch.jpg", "description": "Ipad mini product launch" },
{ "name": "mary meyer", "imageurl": "musicaljourney.jpg", "description": "Mary Meyer speaks at yahoo cloud services" },
{ "name": "biil gates", "imageurl": "productlaunch.jpg", "description": "Bill Gates speaks out on Surface 2" }
]
}


//Model/Event.js
Ext.define('wl.model.Event', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'name' },
{ type: 'string', name: 'imageurl' },
{ type: 'string', name: 'description' }
],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://localhost:54924/components/data/Events.json',


reader: {
type: 'json',
root: 'results'
}
}
});


//Store/Event.js
Ext.define('wl.store.Events', {
extend: 'Ext.data.Store',
requires: 'wl.model.Event',
model: 'wl.model.Event'
});


//View/Event.js
Ext.define('wl.view.EventList', {
extend: 'Ext.panel.Panel',
alias: 'widget.eventlist',
height: 300,
width: 300,
store: 'Events',
/*data: [
{ "name": "miss america 2013", "imageurl": "ballet.jpg", "description": "Miss America 2013 event" },
{ "name": "yanni acroplis", "imageurl": "corporateevent.jpg", "description": "Yanni in france" },
{ "name": "ipad mini product launch", "imageurl": "fashionlaunch.jpg", "description": "Ipad mini product launch" },
{ "name": "mary meyer", "imageurl": "musicaljourney.jpg", "description": "Mary Meyer speaks at yahoo cloud services" },
{ "name": "biil gates", "imageurl": "productlaunch.jpg", "description": "Bill Gates speaks out on Surface 2" }
],*/
tpl : new Ext.XTemplate(
'<tpl for=".">', // interrogate the kids property within the data
'<p style="padding:0.75px;margin:0.75px;background-color:#F7F1F1">',
'<img src="images/{imageurl}" style="cursor:pointer;width:25px;height:25px;vertical-align:middle">',
'&nbsp;&nbsp;{name}',
'</p>',
'</tpl>'
),
initComponent: function() {
console.log("wl.view.EventList > initComponent() ");
this.callParent();
}
});

rajuarien
1 Oct 2013, 6:35 AM
Any updates anybody getting really frustrated, i dont see any errors to on F12