接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的fields,columns等信息,然后交给一个处理函数 makeCustomMadePanel,该函数用来生">
Maison > interface Web > js tutoriel > le corps du texte

Comment ExtJS4 génère automatiquement checkbox_extjs qui contrôle l'affichage et le masquage des colonnes de la grille

WBOY
Libérer: 2016-05-16 16:50:24
original
1062 Les gens l'ont consulté

Pour une raison quelconque, je dois créer un groupe de cases à cocher qui contrôle l'affichage des colonnes de la grille. Bien que le panneau de grille dans EXTJS4 soit livré avec une liste qui peut contrôler l'affichage et le masquage des colonnes, il existe une telle demande (elle doit être claire à un moment donné). coup d'œil)

L'image suivante est présentée ci-dessous

Comment ExtJS4 génère automatiquement checkbox_extjs qui contrôle l'affichage et le masquage des colonnes de la grille

Suite au travail effectué il y a quelques jours, j'ai complété les champs personnalisés ce matin. L'idée est de. obtenez les champs et les colonnes de la colonne une fois la requête ordinaire ou la requête avancée ci-dessus terminée. Attendez les informations, puis transmettez-les à une fonction de traitement makeCustomMadePanel. Cette fonction est utilisée pour générer le groupe de cases à cocher. Lors de sa génération, ajoutez un. Au départ, je pensais que la case à cocher aurait un événement similaire à vérifier. Cependant, après avoir examiné l'API, il semble qu'il n'y ait qu'un événement de changement, MD. .

Publiez la fonction makeCustomMadePanel que j'ai écrite ci-dessous. . Utilisé pour générer automatiquement un groupe de cases à cocher basé sur les colonnes de la grille (le contenu de l'en-tête et d'autres informations de la grille entière sont obtenus à partir de l'arrière-plan. Quelle que soit la table envoyée depuis l'arrière-plan, un groupe de cases à cocher peut être généré pour contrôler le masquage et affichage des colonnes)

paramètres Ce sont des champs et des colonnes utilisés par gridpanel lors de la reconfiguration. La clé est var t=grid_a.columnManager.headerCt.items.get(th.itemId); . Cette phrase est utilisée pour obtenir les informations de colonne de grid_a. . Il semble qu'il soit introuvable dans l'API. J'ai trouvé plusieurs méthodes en ligne mais aucune ne convenait. Je ne veux pas donner d'identifiant à chaque colonne. Cela a été trouvé sur stackoverflow.com/. . http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

Copiez le code Le code est le suivant :

function makeCustomMadePanel(fields,cl)
{

var x=cusMadePanel.getComponent ('custom' );
//console.log(cusMadePanel.getComponent('custom'));
for(var i=0;i{
x.add(
{
xtype : 'checkboxfield',
boxLabel : cl[i].header,
inputValue : champs[i].name,
checked:true,
itemId:i ,
name : 'custom',
auditeurs : {
change : function(th, value, oldValue,eop) {

var t=grid_a.columnManager.headerCt .items.get (th.itemId);
if(t.isVisible()){

t.setVisible(false);
else{
t.setVisible); (vrai);
}
//grid_a.columns[3].setVisible(false);
}}

}
);


Après avoir donné customMadePanel


copiez le code Le code est le suivant : Ext.define ('customMadePanel', {
extend : 'Ext.form.Panel',
title : 'champ personnalisé',
collapsible : true,
items : [ {
itemId:'custom',

xtype : 'checkboxgroup',

fieldLabel : 'Sélectionner le champ',
colonnes : 6,
items : []


}]
//collapsed:true,
});
var cusMadePanel=new customMadePanel();


Les lacunes de mon approche sont également évident, dans la fonction makeCustomMadePanel La boucle pour générer le composant case à cocher prend trop de temps, et cela prend plusieurs secondes pour 38 composants. . L'expérience utilisateur n'est certainement pas bonne. .
Et actuellement, il est généré en fonction des résultats de la requête après chaque requête. . . Je vais réfléchir à nouveau à une bonne solution


Aujourd'hui, j'ai optimisé makeCustomMadePanel, et la vitesse de génération des composants a été considérablement améliorée par rapport à avant !



Copier le code Le code est le suivant : function makeCustomMadePanel(fields,cl)
cusMade=1;
var x=cusMadePanel.getComponent('custom');
//console.log(cusMadePanel.getComponent('custom')); ;
for(var i=0;i{
//x.add(
var temp=
{
xtype : 'checkboxfield' ,
boxLabel : cl[i].header,
//inputValue : champs[i].name,
checked:true,
itemId:i,
name : 'custom',
auditeurs : {
change : function(th, value, oldValue,eop) {

var t=grid_a.columnManager.headerCt.items.get(th.itemId
/) /console.log(t.isVisible());
//console.log('break');
if(t.isVisible()){

t.setVisible(false) ;
}
else{
t.setVisible(true);
}
//console.log(t.isVisible()); columnManager.headerCt .items.get(th.itemId);
//console.log(t1);
//grid_a.columns[3].setVisible(false);
};
//console.log(temp);
fie.push(temp);
//console.log(fie); fie);


L'idée est d'assembler d'abord les objets composants qui doivent être générés en boucle, puis de les ajouter une fois. Le coût de chaque ajout est très élevé et la vitesse est vraiment. beaucoup amélioré ~
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal