¿Cómo genera ExtJS4 automáticamente casillas de verificación para controlar la visualización y ocultación de columnas en la cuadrícula?
Primero se muestra la siguiente imagen.
Terminé de personalizar los campos esta mañana, siguiendo el trabajo que completé hace unos días. La idea es obtener el campo, la columna y otra información de la columna después de que se completa la consulta ordinaria o la consulta avanzada y luego entregarla a una función de procesamiento.
MakeCustomMadePanel, esta función se utiliza para generar un grupo de casillas de verificación y se le agregará un evento cuando se genere. Inicialmente, se pensó que la casilla de verificación tendría un evento similar a marcar, pero al observar la API, parece que solo se puede usar un evento de cambio, MD.
Publica lo que escribiste a continuación.
Función MakeCustomMadePanel. . Se utiliza para generar automáticamente un grupo de casillas de verificación basado en las columnas de la cuadrícula (el contenido del encabezado de toda la cuadrícula se obtiene del fondo, y no importa qué tabla se publique en segundo plano, se puede generar un grupo de casillas de verificación para controlar la ocultación y visualización de columnas).
Estos parámetros son los campos y columnas utilizados por gridpanel durante la reconfiguración, y var usa estos parámetros durante este período.
t = grid _ a. administrador de columnas. encabezado CT get(th. itemid); . Esta oración se utiliza para obtener la información de la columna de grid_a. Parece que no puedo encontrarlo en la API. Encontré varios métodos en línea, pero ninguno era adecuado. No quiero darle una identificación a cada columna. Encontré esto en stackoverflow.com/. /questions/20791685/extjs-4-how-do-I-hide-show-grid-columns-on-the-fly
Copia el código
El código es el siguiente :
Función
makeCustomMadePanel(campo, cl)
{
Definir variables
x = cusmadepanel . get componente(' personalizado ');
//console . log(cusmadepanel . get componente(' personalizado '));
For (var
I = 0; i & ltfields.lengthi++)
{
x.add(
{
xtipo
:
p>
Campo de casilla de verificación',
Etiqueta de caja
:
cl[i],
Valor de entrada
:
Campo[i].
Nombre,
Marcado: correcto,
itemId:i,
Nombre
:
Personalizado ',
Oyente
:
{
Cambiar
:
Función (th ,
valor,
valor anterior, eop)
{
Definir variable
t = grid _ un administrador de columnas. CT elementos. get(th. itemid);
if(t.isVisible()){
t set visible(false); p>
}
De lo contrario {
t .set visible(true);
}
//grid_a .columns; [3]. establecer visible(falso);
}}
}
);
}
}
Después de darle a customMadePanel
Copia el código
El código es el siguiente:
Ext.define('customMadePanel ',
{
Extensiones
:
'Panel de formulario externo',
Título
:
Campos personalizados',
Desmontable
:
Sí,
Artículo
:
[
{
itemId: "personalizado",
xtype
:
Grupo de casillas de verificación',
Etiqueta de campo
:
Seleccionar campo',
Columna
：
6,
Proyecto
：
[]
}]
//Contraer: verdadero,
});
Definir variables
cusMadePanel=new
customMadePanel(); >
Las deficiencias de mi método también son obvias. Generar componentes de casilla de verificación mediante un bucle en la función makeCustomMadePanel lleva demasiado tiempo, 38 componentes tarda varios segundos. . La experiencia del usuario definitivamente no es buena. .
Y actualmente se genera en función de los resultados de la consulta después de cada consulta. . . Se me ocurrirá una buena idea.
¡Hoy optimizamos makeCustomMadePanel y la velocidad de generación de componentes ha mejorado significativamente que antes!
Copiar código
El código es el siguiente:
Función
makeCustomMadePanel(field, cl)
cus made = 1;
Definir variables
x = cusmadepanel . get componente(' personalizado '); log(cusmadepanel . get componente). (' custom ') '));
Definir variables
fie = [];
For (var
I = 0 ; i<fields. lengthi++)
{
//x.add(
Definir variables
Temperatura=
{
xtype
:
Campo de casilla de verificación',
Etiqueta de casilla
:
cl[i]. Título,
//Valor de entrada
:
Campo[i].
Nombre,
Marcado: correcto,
itemId:i,
Nombre
:
Personalizado ',
Oyente
:
{
Cambiar
:
Función (th ,
valor,
valor anterior, eop)
{
Definir variable
t = grid _ un administrador de columnas. encabezado CT. get(th. itemid);
//console. (' break ');
if(t.isVisible()){
t . set visible(false);
}
<. p>De lo contrario {t . set visible(true);
}
//console . p>
//var
t 1 = grid _ a. administrador de columnas. encabezado CT. get(th. itemid); t 1);
//grid_a.columns[3]. set visible(false);
}}
};
//console . (temp);
}
//consola .log(fie);
x . La idea es agrupar primero los objetos componentes que deben generarse en un bucle y luego agregarlos todos a la vez. El costo de cada adición es muy alto y la velocidad realmente ha mejorado mucho ~