Extjs agrega panel de cuadrícula al contenido de acordeón

grid extjs4

Question

De hecho, no estoy seguro si esto es posible, pero lo preguntaré de todos modos. Tengo un grupo de controles de acordeón, y dentro del cuerpo de contenido de cada uno necesito mostrar un panel de cuadrícula. El panel de la cuadrícula debe tener un evento de clic asociado. Intenté simplemente crear el panel de la cuadrícula y establecer la propiedad html del acordeón, pero esto no produce contenido.

¿De alguna manera puedo lograr lo anterior?

Answer 1

Esto es perfectamente posible, pero el cuerpo del acordeón no es el lugar para incluirlo. Tendrá que agregarlo a los items: [] array of the accodion. El cuerpo (o html) solo acepta html. Ejemplo:

http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html

éste tiene una grilla dentro de él.

Answer 2

No puede tener contenido html (insertado por la propiedad) junto con ningún otro contenido. Si agrega cualquier elemento, el valor de la propiedad html no se establecerá / anulará. Pero con seguridad puede colocar lo que desee en un panel de acordeón. Incluso una grilla. Pero para ese caso, y basado en la última pregunta , le recomendaría que haga referencia a la vista en la grilla. Puedes hacer esto simplemente usando un ComponentQuery

Los eventos de clic se pueden aplicar utilizando la función de control del controlador.

Para su comprensión básica:

En ExtJS, rara vez usas código html simple. En la mayoría de los escenarios, utiliza cualquier tipo de componente. Todo está anidado dentro de los elementos-array o dockedItem-array. Los elementos dentro de estas matrices también son procesados ​​por el sistema de diseño.

Algunos ejemplos de consulta aplicables a la función de control

A continuación, this refiere al controlador en sí.

Usted conoce el Id de la grilla (normalmente no hizo esto). Los Id''s están marcados por un # inicio

control({''#yourId'': {itemclick: this.onItemclick }});

Usted conoce el xtype y que solo hay una instancia de este tipo. También puede describir una ruta usando espacios entre los xtypes.

control({''grid'': {itemclick: this.onItemclick }});

Ha establecido una propiedad personalizada en la cuadrícula (puede referir cualquier propiedad de esta manera). Este es totalmente compatible con el de arriba. Recomiendo este en tu caso

control({''grid[customIdent=accordionGrid]'': {itemclick: this.onItemclick }});

Estas son algunas formas de usar ComponentQueries, hay más. Para una explicación más detallada, debe consultar la API de sencha para ComponentQuery

También tenga en cuenta que cada componente implementa los métodos up () y down () que también admiten ComponentQueries.

Olvidé mencionar: para un control, la consulta estrictamente necesita devolver solo un resultado (solo se tomará el primero), un ComponentQuery por otro lado puede devolver resultados múltiples.