Estoy tratando de utilizar XTemplate cuando defino un punto de vista, aunque no sé si lo estoy usando correctamente, este es mi código:

East.js

Ext.define('MyApp.view.main.East', {
extend: 'Ext.panel.Panel',
alias: 'widget.eastView',
requires: [
'MyApp.view.main.east.Notifications'
//'MyApp.view.main.east.Actions'
],
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
defaults: {
flex: 1,
border: false
},
items: [{
store: myStore,
tpl: notiTpl
}, {
html: 'Actions'
}]
});
Ext.define('Notifications', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'from', type:'string' },
{ name:'date', type:'string' },
{ name:'content', type:'string' }
]
});
var myStore = Ext.create('Ext.data.Store', {
id:'notiStore',
model: 'Notifications',
data: [
{ src:'resources/img/east/img1.png', from:'from1', date:'24/04/2013 11:00',
content:'Bla bla bla.' },
{ src:'resources/img/east/img2.png', from:'A20132404-0002', date:'24/04/2013 10:55',
content:'Bla bla bla' }
]
});
var notiTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap">',
'<div class="notImg">',
'<img src="{src}" />',
'</div>',
'<div style="float:left; width:90%;">',
'<div>',
'<span>{from}</span>',
'<span style="float:right;">{date}</span>',
'</div>',
'<div>',
'<span>{content}</span>',
'</div>',
'</div>',
'</div>',
'</tpl>'
);

Y puedo utilizar este punto de vista en otro punto de vista se llama
Main.js

Ext.define('MyApp.view.Main' , {
extend: 'Ext.panel.Panel',
alias: 'widget.mainView',
requires: [
'MyApp.view.main.Toolbar',
'MyApp.view.main.West',
'MyApp.view.main.Center',
'MyApp.view.main.East'
],
layout: {
type: 'border',
border: false
},
defaults: {
autoScroll: true,
},
items: [{
region: 'north',
xtype: 'toolbarView'
}, {
region: 'west',
width: 250,
xtype: 'westView'
}, {
region: 'east',
width: 250,
xtype: 'eastView'
}, {
region: 'center',
xtype: 'centerView',
border: true
}]
});

Con este código, sólo puedo ver la barra de herramientas, oeste y centro, y en mi este punto de vista, sólo el contenido html de la segunda cuestión, Actions. ¿Qué estoy haciendo mal?

Por otro lado, me gustaría tener mi código ordenado, me gustaría tener la tienda de definiciones en la carpeta de almacén de vistas en la vista de carpeta y modelos en el modelo de carpeta, ¿Cómo puedo llamar a estas porciones de código de mi vista Este?

Gracias de antemano!

Saludos.

ACTUALIZACIÓN:

Gracias por tu respuesta. Este sería el código como lo dijo, ¿verdad?

A La Vista:

items: [{
xtype: 'dataview',
store: 'notiStore',
tpl: notiTpl
}, {
html: 'Actions'
}]

Y en la Tienda, en cambio id:'notiStore', y escribir:

storeId: 'notiStore',

¿Es correcto? Lo he probado, pero no funciona, lo que me estoy olvidando?

InformationsquelleAutor Alavaros | 2013-11-19

2 Comentarios

  1. 2

    El problema era que yo estaba llamando a la vista por primera vez. La solución para mí es:

    East.js

    Ext.define('MyApp.view.main.East', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.eastView',
    requires: [
    'MyApp.view.main.east.Notifications'
    //'MyApp.view.main.east.Actions'
    ],
    layout: {
    type: 'vbox',
    align: 'stretch'
    },
    border: false,
    defaults: {
    flex: 1,
    border: false
    },
    items: [{
    xtype: 'notificationsView'
    }, {
    html: 'Actions'
    }]
    });

    Notifications.js

    Ext.define('Notification', {
    extend: 'Ext.data.Model',
    fields: [
    { name:'src', type:'string' },
    { name:'from', type:'string' },
    { name:'date', type:'string' },
    { name:'content', type:'string' }
    ]
    });
    Ext.create('Ext.data.Store', {
    model: 'Notification',
    id: 'notiStore',
    data: [
    { src:'resources/img/east/ic_new_mail_grey01.png', from:'De H24', date:'24/04/2013 11:00', content:'Recordatorio: falta sólo una hora para la generación de informes semalaes.' },
    { src:'resources/img/east/ic_to_associate_alarma_grey.png', from:'A20132404-0002', date:'24/04/2013 10:55', content:'Alerta asignada al operador MyApp' }
    ]
    });
    var notiTpl = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="thumb-wrap">',
    '<div class="notImg">',
    '<img src="{src}" />',
    '</div>',
    '<div style="float:left; width:90%; padding: 5px;">',
    '<div>',
    '<span>{from}</span>',
    '<span style="float:right;">{date}</span>',
    '</div>',
    '<div>',
    '<span>{content}</span>',
    '</div>',
    '</div>',
    '</div>',
    '</tpl>'
    );
    Ext.define('MyApp.view.main.east.Notificaciones', {
    extend: 'Ext.view.View',
    alias: 'widget.notificacionesView',
    padding: 5,
    store: 'notiStore',
    tpl: notiTpl,
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available',
    renderTo: Ext.getBody()
    });

    Como se puede ver, soy la definición de la vista en el final del código. Funciona bien, pero si trato de ordenar mi código, me refiero a poner el modelo en el Modelo de carpeta, guardar en carpeta de Almacén y dejar sólo la plantilla y la vista en este archivo, yo soy incapaz de hacer que funcione. ¿Alguien sabe cómo volver a escribir el código para conseguirlo??

    Saludos.

  2. 1

    No se especifica un xtype para el primer elemento. Como consecuencia de ello, se utiliza el defaultType, y es ‘panel’. El Panel no apoyo las tiendas, se alimenta ya sea en su datos opción de configuración, o de un objeto de datos que pasa con el actualización método.

    El componente que se une a una tienda a una costumbre XTemplate es el dataview. Usted tendrá el uso que en lugar del panel.

    Con respecto a tu lado pregunta, se puede ver en los documentos de ejemplo para dataview que usted puede dar un storeId a sus tiendas, y, a continuación, utilizar Ext.de datos.StoreManager#de búsqueda para recuperar una instancia de esta tienda (que uso id en lugar de storeId en el ejemplo, pero parece un poco en desuso). De hecho, incluso se puede asignar el identificador de almacén de cadena directamente (por ejemplo,store: 'myStoreId'), y Ext será tan amable de hacer llamar a la StoreManager para usted.

    • He intentado lo que escribió, pero no lo entiendo! Acabo de actualizar el post, gracias por su ayuda.

Dejar respuesta

Please enter your comment!
Please enter your name here