t1esto's Perfil
Estoy "tratando" de desarrollar una aplicacion con ExtJs 4 en MVC, y no se como llemar mi vista que es de tipo componente con los datos que vienen en el store, estoy usando la propiedad tpl para poder poner codigo HTML en el componente, la cuestion es que como decia anteriormente no me carga (o no se) los datos que vienen en es store, aqui dejo los codigos.
Primero mi app.js el punto de entrada.
- Código: Seleccionar todo
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name: 'CERT',
appFolder: baseAppUrl + 'app',
controllers: [
'Welcome'
],
autoCreateViewport: true,
});
Luego la controller Welcome.js Aqui no hay que hacer mucho solo llamar a la modelo y al store
- Código: Seleccionar todo
Ext.define('CERT.controller.Welcome', {
extend: 'Ext.app.Controller',
models: ['Config'],
stores: ['Config']
});
Aca la modelo Config.js
- Código: Seleccionar todo
Ext.define("CERT.model.Config",{
extend : "Ext.data.Model",
fields : [
{name:"ref",type:"string"},
{name:"logo",type:"string"},
{name:"title",type:"string"}
]
});
Luego la store Config.js que es donde le digo que recoja los datos de un .json, asi lo estoy asiendo primeramente para ver si funciona.
- Código: Seleccionar todo
Ext.define("CERT.store.Config",{
extend : "Ext.data.Store",
model : "CERT.model.Config",
autoLoad : true,
proxy : {
type : "ajax",
url : baseAppUrl + "data/config.json",
reader : {
type : "json",
root : "data"
}
}
});
Ya se que Ext carga el store y que trae perfectamente los datos pq tengo firebug y los puedo visualizar perfectamente, solo que en ejemplo que he visto el sore carga perfectamnte en componetes de tipo form o grids, pero no lo habia visto en vistas que solo llevasen un XTemplate. Aca por fin las vistas. Porque en el app.js dije que autoCreateViewport: true, y solo redefini un viewport, viewport.js
- Código: Seleccionar todo
Ext.define('CERT.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',
requires: [
'CERT.view.Header',
'CERT.view.Footer'
],
initComponent: function() {
var me = this;
Ext.apply(me, {
items: [
{
xtype : 'panel',
border: false,
id : 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
dockedItems: [
Ext.create('CERT.view.Header'),
Ext.create('CERT.view.Footer')
]
}
]
});
me.callParent(arguments);
}
});
Y por fin el Header.js
- Código: Seleccionar todo
Ext.define('CERT.view.Header', {
extend: 'Ext.Component',
store: 'CERT.store.Config',
dock: 'top',
baseCls: 'app-header',
initComponent: function() {
Ext.applyIf(this, {
html : 'Head',
data :{
aref : "localhost/codeigniterext/", //aqui he probado poner {"dataItem: ref"} pero lo que visualizo en la vista ya renderizada es "[Objet objet]"
alogo : "http://localhost/codeigniterext/application/views/images/logo.png",
atitle : "Titulo"
},
tpl :[
'<div id="cabecera">',
'<div id="cab_1"><a href="{aref}"> <img id="logo" src="{alogo}" /> </a>',
'<h1>{atitle}</h1>',
'</div>',
'<div id="sys_menu" class="clearfix"><div id="toolbar"></div>',
'<div id="user">',
'</div>',
'</div>',
'</div>'
]
})
this.callParent(arguments);
}
});
Como ven en el data del tpl, he puesto los datos estaticos, pero la idea es que se llenen con el store.
Si alguien me pudiera ayudar???
