Comment ajouter des filtres dans la colonne de la grille des en-têtes dans extjs?

J'ai une grille avec de nombreux enregistrements en elle. donc, je veux ajouter des filtres dans chaque en-tête de colonne pour filtrer les données requises facilement. J'ai vu l'exemple donné dans le sencha docs. Mais Comment la mettre en œuvre dans le Extjs la version 4.2. Comment utiliser les UX des catégories? Est-il un plugin?

Je suis très reconnaissant à vous.

S'il vous plaît aider moi.

Anand

InformationsquelleAutor Anand Singh | 2013-06-13
  1. 3

    Ceci est un exemple: 

    Ext.define('Webdesktop.view.admin.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.admin_casoslist',
initComponent: function() {
    var me = this,
    filters = {
        ftype: 'filters',
        encode: false,
        local: true
    };

    Ext.apply(me, {
        title: 'gridTitle',
        store: List_CasSos_Store,

        filterable: true,
        features: [filters],
        closable: true, //fixme: need to set here, because has no effect in tabpanel defaults configuration
        autoScroll: true,
        columns: {
            items:[
            {
                text: 'header1',
                filter: {
                    type: 'string'
                },
                flex: 1,
                dataIndex: 'relation_patron_paraine'
            },{
                text:'header2',
                filter: {
                    type: 'list',
                    options: ['case4', 'case3', 'case2', 'case1']
                },
                hidden:true,
                flex: 1,
                dataIndex: 'etatsante'
            },{
                text:'header3',
                filter: {
                    type: 'numeric'
                },
                hidden:true,
                flex: 1,
                dataIndex: 'revenumnsuel'
            }
            ],
            defaults : {
                align: 'center'
            }
        }
    });
    me.callParent();
}

    Dans le contrôleur: 

    uses: [
   'Webdesktop.view.admin.List',
    ...
   'Ext.ux.grid.FiltersFeature'
    ]
    • Vous devez exiger 'Ext.ux.grid.FiltersFeature'
    • Comment inclure le 'Ext.ux.de la grille.FiltersFeature " dans mon application..?
    • J'ai inclus le filtre UX classe de l'application. Comment ajouter des filtres dans la colonne de définitions. Je veux dire sont-elles besoin d'être spécifié manuellement ou répertoriés dans les options de configuration...?
    • Dans chaque colonne, vous devez spécifier le filtre, comme indiqué dans le code ci-dessus.
    • il n'y a pas d'options pour ajouter des filtres dans l'architecte, ai-je besoin de modifier le code.? et le Filtre de config..? et comment faire pour créer un chemin comme ça... Ext.Loader.setPath('Ext.ux', '../ux');
    • J'ai toujours Uncaught TypeError: object n'est pas une fonction

    InformationsquelleAutor Aminesrine
  2. 2

    Vous devez l'ajouter à votre grille de configuration:

    plugins: [{
  ptype: 'gridfilters'
}],

    Et puis dans chaque colonne:

    filter: {type: 'string', dataIndex: 'passengerFullName'},

    Noter que le filtre est en dépendait magasin si ce sera une distance de filtre ou un filtre local.

    Voir ici pour plus d'infos: http://docs.sencha.com/extjs/6.0.2-classic/Ext.grid.filters.Filters.html

    InformationsquelleAutor Georgios Pligoropoulos
  3. 1

    À utiliser le filtre dans l'en-tête de grid vous devez déclarer gamme de filtre, puis donner de l'envergure à la grille. Ensuite, écrivez 

    this.filters = new Ext.ux.grid.GridFilters({
            filters:this.filter
        }) ;

    Donner un plugin pour que

    this.plugins = [this.filters];

    Où vous l'ajout de la colonne d'écriture 

    gridEl.filter{
        type: 'list',
        dataIndex: "DATAINDEX",
        local : local,
        dataForFilter : data
    };
    InformationsquelleAutor UDID
  4. 0

    Une solution c'est de capter la "colonne, cliquez sur" colonne, obtenir le paramètre que vous souhaitez filtrer et dans la fonction mettre ce filtre sur la Grille du Magasin.

    Colonne Exemple

    {
    header      : "email",
    dataIndex   : 'email',
    listeners : {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ 
                storeGrid.filter("email", /\.com$/); //email
                            storeGrid.sort('myField', 'ASC');
            }
        }
    }
},

    Sencha De Filtre: la banque du filtre

    Sencha De Tri: trier stocker des données

    InformationsquelleAutor mfruizs2