Results 1 to 6 of 6

Thread: Local Grid Filtering

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    23

    Default Local Grid Filtering

    I have an app that uses the Viewport. I am loading data into a grid from an external database through a JSON store. Is it possible to filter the grid locally from a form located in a different region of the Viewport? I would also need the same filter to work on a grid that loads in a second tab in the "center" region of the Viewport. I have included my code below for any references you may need to how the application is presently being built:

    Code:
    Ext.ns("NovoPT");
    
    Ext.BLANK_IMAGE_URL = './ext-3.2.0/resources/images/default/s.gif';
    
    Ext.onReady(function() {
    
        //Ext.QuickTips.init();
    
        var structure = {
            TacticGroups: ['Speakers', 'Sales Representatives', 'MSA Team', 'Other DM', 'Publications', 'KOL/Non-Speakers', 'Non Personal', 'Conventions']
        },
        speakers = [],
        salesrep = [],
        msa = [],
        othrdm = [],
        pub = [],
        kolnonspk = [],
        nonprsnl = [],
        cnvntns = [],
        fields = [],
        columns = [],
        data = [],
        tacGroupRow = [];
        
        function generateConfig(){
            var tacLength = speakers.length + salesrep.length + msa.length + othrdm.length + pub.length + kolnonspk.length + nonprsnl.length + cnvntns.length;
                
            Ext.iterate(structure, function(tacGrp){
                tacGroupRow.push({
                    header: tacGrp,
                    align: 'center',
                    colspan: tacLength
                });
                Ext.each(tacGrp, function(tactics){
    
                    fields.push({
                        type: 'string',
                        name: tactics
                    });
                    columns.push({
                        dataIndex: tactics,
                        header: tactics
                    });
    
                    data.push();
                });
            })
        }
        
        // Run method to generate columns, fields, row grouping
        generateConfig();
        
        var loadingMask = Ext.get('loading-mask');
        var loading = Ext.get('loading');
        //  Hide loading message
        loading.fadeOut({ duration: 0.2, remove: true });
        //  Hide loading mask
        loadingMask.setOpacity(0.9);
        loadingMask.shift({
              //xy: loading.getXY(),
              //width: loading.getWidth(),
              //height: loading.getHeight(),
              remove: true,
              duration: 0.3,
              opacity: 0.1,
              easing: 'fadeOut'
        });
         
        NovoPT.ds = new Ext.data.JsonStore({
            root: 'publications',
            url: WEBROOT + '/publications/show_list',
            idProperty:'slug',
            fields: [
                {name: 'slug', type: 'string'},
                {name: 'title', type: 'string', mapping:'title'},
                {name: 'abbreviated_name', type: 'string', mapping:'abbreviated_name'},
                {name: 'author', type: 'string', mapping:'author'},
                {name: 'estimatedDate', type: 'date', dateFormat: 'c'},
                {name: 'last_update', type: 'date', dateFormat: 'c', mapping:'last_update'},
                {name: 'brand', type: 'string', mapping:'brand'},
                {name: 'company', type: 'string', mapping:'company'},
                {name: 'mostImpactedAudience', type: 'string', mapping:'mostImpactedAudience'},
                {name: 'topic', type: 'string', mapping:'topic'},
                {name: 'title', type: 'string', mapping:'title'},
                {name: 'keyMessage', type: 'string', mapping:'keyMessage'},
                {name: 'potentialStudyImpact', type: 'string', mapping:'potentialStudyImpact'},
                {name: 'journal_congress', type: 'string', mapping:'journal_congress'},
                {name: 'supportingData', type: 'string', mapping:'supportingData'},
                {name: 'status', type: 'string', mapping:'status'},
                {name: 'publicationResponseToSpeakers', type: 'string', mapping:'publicationResponseToSpeakers'},
                {name: 'liveSpeakerTraining', type: 'string', mapping:'liveSpeakerTraining'},
                {name: 'speakerNewsChannel', type: 'string', mapping:'speakerNewsChannel'},
                {name: 'provideAsSlideLibraryOnly', type: 'string', mapping:'provideAsSlideLibraryOnly'},
                {name: 'incorporateAsMandatorySlides', type: 'string', mapping:'incorporateAsMandatorySlides'},
                {name: 'salesTraining', type: 'string', mapping:'salesTraining'},
                {name: 'incorporatePcpVisAid_BOE', type: 'string', mapping:'incorporatePcpVisAid_BOE'},
                {name: 'incorporateEndoVisAid', type: 'string', mapping:'incorporateEndoVisAid'},
                {name: 'salesBackground', type: 'string', mapping:'salesBackground'},
                {name: 'publicationResponseToReps', type: 'string', mapping:'publicationResponseToReps'},
                {name: 'createNewDetailPiece', type: 'string', mapping:'createNewDetailPiece'},
                {name: 'reprintCarrier', type: 'string', mapping:'reprintCarrier'},
                {name: 'proactiveKOLOutreach', type: 'string', mapping:'proactiveKOLOutreach'},
                {name: 'msaSlides', type: 'string', mapping:'msaSlides'},
                {name: 'diLetter', type: 'string', mapping:'diLetter'},
                {name: 'msaTraining', type: 'string', mapping:'msaTraining'},
                {name: 'prInitiatives', type: 'string', mapping:'prInitiatives'},
                {name: 'lte', type: 'string', mapping:'lte'},
                {name: 'secondaryManuscript', type: 'string', mapping:'secondaryManuscript'},
                {name: 'kolOther', type: 'string', mapping:'kolOther'},
                {name: 'letterToKOLAdvocates', type: 'string', mapping:'letterToKOLAdvocates'},
                {name: 'presentToAdvisoryBoards', type: 'string', mapping:'presentToAdvisoryBoards'},
                {name: 'presentToPracticeInsightsGroups', type: 'string', mapping:'presentToPracticeInsightsGroups'},
                {name: 'dearDoctorLetter', type: 'string', mapping:'dearDoctorLetter'},
                {name: 'nmlActivity', type: 'string', mapping:'nmlActivity'},
                {name: 'productTheaters', type: 'string', mapping:'productTheaters'},
                {name: 'conventionActivities', type: 'string', mapping:'conventionActivities'},
                {name: 'actionRequired', type: 'string', mapping:'actionRequired'},
                {name: 'tactics'  }
            ]
        });
        
        NovoPT.col = new Ext.ux.grid.LockingColumnModel([
            {header: 'Brand',                     width: 110, sortable: true, dataIndex: 'brand'},
            {header: 'Topic',                     width: 120, sortable: true, dataIndex: 'topic'},
            {header: 'Title',                     width: 500, sortable: true, dataIndex: 'title'},
            {header: 'Abbrev Title',             width: 200, sortable: true, dataIndex: 'abbreviated_name'},
            {header: 'Publiction Date',         width: 100, sortable: true, dataIndex: 'estimatedDate', xtype: 'datecolumn', format: 'M d, Y'},
            //{header: 'Citation',                 width: 200, sortable: true, dataIndex: 'citation'},
            {header: 'Status',                     width: 100, sortable: true, dataIndex: 'status'},
            {header: 'Last Update',             width: 100, sortable: true, dataIndex: 'last_update', xtype: 'datecolumn', format: 'M d, Y'},
            {header: 'Company',                 width: 200, sortable: true, dataIndex: 'company'},
            {header: 'Author',                     width: 150, sortable: true, dataIndex: 'author'},
            {header: 'Journal',                 width: 175, sortable: true, dataIndex: 'journal_congress'},
            //{header: 'Notes',                 width: 200, sortable: true, dataIndex: 'notes', hidden: true},    
            {header: 'Supporting Data',         width: 300, sortable: true, dataIndex: 'supportingData', hidden: true},
            {header: 'Key Messages',             width: 300, sortable: true, dataIndex: 'keyMessage', hidden: true},
            //{header: 'Strategic Imperative',     width: 300, sortable: true, dataIndex: 'strategic_imperative'},
            {header: 'Potential Study Imapct',     width: 300, sortable: true, dataIndex: 'potentialStudyImpact', hidden: true},
            {header: 'Action Required',         width: 300, sortable: true, dataIndex: 'actionRequired', hidden: true},
            {header: 'Segment',                 width: 100, sortable: true, dataIndex: 'mostImpactedAudience'}
            //{header: 'Tactic Group',             width: 300, sortable: true, dataIndex: 'tacticGroup'},
            //{header: 'Tactic',                 width: 300, sortable: true, dataIndex: 'tactic'},
            //{header: 'Tactic Comment',         width: 300, sortable: true, dataIndex: 'tacticComment', hidden: true}
        ]);
        
        NovoPT.taccol = new Ext.ux.grid.LockingColumnModel([
            //{header: 'Brand',                     width: 110, sortable: true, dataIndex: 'brand'},
            {header: 'Topic',                         width: 120, sortable: true, dataIndex: 'topic'},
            {header: 'Title',                         width: 500, sortable: true, dataIndex: 'title'},
            //{header: 'Abbrev Title',                 width: 200, sortable: true, dataIndex: 'abbreviated_name'},
            {header: 'Publiction Date',             width: 100, sortable: true, dataIndex: 'estimatedDate', xtype: 'datecolumn', format: 'M d, Y'}
            //{header: 'Citation',                     width: 200, sortable: true, dataIndex: 'citation'},
            //{header: 'Status',                     width: 100, sortable: true, dataIndex: 'status'},
            //{header: 'Last Update',                 width: 100, sortable: true, dataIndex: 'last_update', xtype: 'datecolumn', format: 'M d, Y'},
            //{header: 'Company',                     width: 200, sortable: true, dataIndex: 'company'},
            //{header: 'Author',                     width: 150, sortable: true, dataIndex: 'author'},
            //{header: 'Journal',                     width: 175, sortable: true, dataIndex: 'journal_congress'},
            //{header: 'Notes',                     width: 200, sortable: true, dataIndex: 'notes', hidden: true},    
            //{header: 'Supporting Data',             width: 300, sortable: true, dataIndex: 'supportingData', hidden: true},
            //{header: 'Key Messages',                 width: 300, sortable: true, dataIndex: 'keyMessage', hidden: true},
            //{header: 'Strategic Imperative',         width: 300, sortable: true, dataIndex: 'strategic_imperative'},
            //{header: 'Potential Study Imapct',     width: 300, sortable: true, dataIndex: 'potentialStudyImpact', hidden: true},
            //{header: 'Action Required',             width: 300, sortable: true, dataIndex: 'actionRequired', hidden: true},
            //{header: 'Segment',                     width: 100, sortable: true, dataIndex: 'mostImpactedAudience'}
            //{header: 'Tactic Group',                 width: 300, sortable: true, dataIndex: 'tacticGroup'},
            //{header: 'Tactic',                     width: 300, sortable: true, dataIndex: 'tactic'},
            //{header: 'Tactic Comment',             width: 300, sortable: true, dataIndex: 'tacticComment', hidden: true}
        ]);
        
        NovoPT.listgrid = new Ext.grid.GridPanel({
            border: false,
            //layout: 'fit',
            store: NovoPT.ds,
            colModel: NovoPT.col,
            sm: new Ext.grid.RowSelectionModel({
                singleSelect:true,
                listeners: {
                    rowselect: function(sm, row, rec) {
                        var msgPanel = Ext.getCmp('msgTab');
                        var tacticsPanel = Ext.getCmp('tacticsTab');
                        var impactPanel = Ext.getCmp('impactTab');
                        msgTpl.overwrite(msgPanel.body, rec.data);
                        tacticsTpl.overwrite(tacticsPanel.body, rec.data);
                        impactTpl.overwrite(impactPanel.body, rec.data);
                        Ext.getCmp('details').expand();
                    }
                }
            }),
            loadMask: true,
            stripeRows: true,
            bbar: new Ext.Toolbar({
                store: NovoPT.ds,
                height: 30,
                contentEl: 'legend',
                displayInfo: true
            }),
            view: new Ext.ux.grid.LockingGridView({
                //forceFit: true,
                enableRowBody: true,
                getRowClass: function(record, index)  {
                    var c = record.get('brand');                
                    switch (c){
                        case 'Levemir':
                            return 'levemir';
                            break;
                        case 'NovoLog':
                            return 'novolog';
                            break;
                        case 'NovoLog Mix 70/30':
                            return 'novomix';
                            break;
                        case 'SIBA/SIAC':
                            return 'siba';
                            break;
                        case 'Victoza':
                            return 'victoza';
                            break;
                        default: return;
                    }
                }
            })
        });
        
        var group = new Ext.ux.grid.ColumnHeaderGroup({
            rows: [tacGroupRow]
        });
        
        NovoPT.tacticsgrid = new Ext.grid.GridPanel({
            border: false,
            //layout: 'fit',
            store: NovoPT.ds,
            colModel: NovoPT.taccol,
            sm: new Ext.grid.RowSelectionModel({
                singleSelect:true,
                listeners: {
                    rowselect: function(sm, row, rec) {
                        var msgPanel = Ext.getCmp('msgTab');
                        var tacticsPanel = Ext.getCmp('tacticsTab');
                        var impactPanel = Ext.getCmp('impactTab');
                        msgTpl.overwrite(msgPanel.body, rec.data);
                        tacticsTpl.overwrite(tacticsPanel.body, rec.data);
                        impactTpl.overwrite(impactPanel.body, rec.data);
                        Ext.getCmp('details').expand();
                    }
                }
            }),
            loadMask: true,
            /*bbar: new Ext.PagingToolbar({
                pageSize: 18,
                store: NovoPT.ds,
                displayInfo: true
            }),*/
            view: new Ext.ux.grid.LockingGridView({
                //forceFit: true,
                enableRowBody: true,
                getRowClass: function(record, index)  {
                    var c = record.get('brand');                
                    switch (c){
                        case 'Levemir':
                            return 'levemir';
                            break;
                        case 'NovoLog':
                            return 'novolog';
                            break;
                        case 'NovoLog Mix 70/30':
                            return 'novomix';
                            break;
                        case 'SIBA/SIAC':
                            return 'siba';
                            break;
                        case 'Victoza':
                            return 'victoza';
                            break;
                        default: return;
                    }
                }
            }),
            plugins: group
        });
        
        
        NovoPT.centerTabs = new Ext.TabPanel({
            renderTo: 'tabs',
            activeTab: 1,
            border: false,
            autoScroll: true,
            deferredRender: false,
            bodyStyle:'background:#eae9ee;',
            items:[
                {contentEl:'tabs-1', autoScroll: true, title:'Home'},
                //{contentEl:'tabs-2', title:'Timeline'},
                {
                    layout: 'fit',
                    items: [NovoPT.listgrid],
                    title:'List'
                },
                {
                    layout: 'fit',
                    items: [NovoPT.tacticsgrid], 
                    title:'Tactics'
                }
            ]
        });
        
        /*centerTabs.on("tabchange", function(poo, ltab)  {
            if (ltab instanceof Ext.grid.GridPanel) {
                Ext.ds.load();
            }
        });*/
        
        var msgTpl = new Ext.XTemplate(
            '<div id="tabs-5">',
                '<div class="meta-head">',
                    '<div class="top clear">',
                        '<div class="icon"><img src="img/doc_icon.gif" alt="" /></div>',
                        '<div class="pub-info">',
                            '<h2>{title}</h2>',
                            '<div class="created-date">{estimatedDate:date("F j, Y")}</div>',
                            '<div class="last-date">{last_update:date("F j, Y")}</div>',
                        '</div>',
                    '</div>',
                '</div>',
                '<div class="messages">',
                    '<h3>Key Messages</h3>',
                    '<ul>',
                    '{keyMessage}',
                    '</ul>',
                '</div>',
            '</div>'
        );
        
        var tacticsTpl = new Ext.XTemplate(
            '<div id="tabs-6">',
                '<div class="meta-head">',
                    '<div class="top clear">',
                        '<div class="icon"><img src="img/doc_icon.gif" alt="" /></div>',
                        '<div class="pub-info">',
                            '<h2>{title}</h2>',
                            '<div class="created-date">{estimatedDate:date("F j, Y")}</div>',
                            '<div class="last-date">{last_update:date("F j, Y")}</div>',
                        '</div>',
                    '</div>',
                '</div>',
                '<div class="messages">',
                    '<h3>Tactics</h3>',
                    '<ul>',
                        '<tpl for="tactics">',
                            '<tpl if="istrue == 1">',
                                '<li> {nice_name}</li>',
                            '</tpl>',
                        '</tpl>',
                    '</ul>',
                '</div>',
            '</div>'
        );
        
        var impactTpl = new Ext.XTemplate(
            '<div id="tabs-7">',
                '<div class="meta-head">',
                    '<div class="top clear">',
                        '<div class="icon"><img src="img/doc_icon.gif" alt="" /></div>',
                        '<div class="pub-info">',
                            '<h2>{title}</h2>',
                            '<div class="created-date">{estimatedDate:date("F j, Y")}</div>',
                            '<div class="last-date">{last_update:date("F j, Y")}</div>',
                        '</div>',
                    '</div>',
                '</div>',
                '<div class="messages">',
                    '<h3>Potential Study Impacts</h3>',
                    '<p>{potentialStudyImpact}</p>',
                '</div>',
            '</div>'
        );
        
        NovoPT.rightTabs = new Ext.TabPanel({
            renderTo: 'tabs2',
            activeTab: 0,
            border: false,
            deferredRender: false,
            tbar: [{
                xtype: 'button',
                //handler: submitSearchForm,
                text: 'View All Details'
            }],
            items:[
                {id: 'msgTab', xtype: 'panel', autoScroll: true, tpl: [msgTpl], title:'Messages'},
                {id: 'tacticsTab', xtype: 'panel', autoScroll: true, tpl: [tacticsTpl], title:'Tactics'},
                {id: 'impactTab', xtype: 'panel', autoScroll: true, tpl: [impactTpl], title:'Study Impact'}
            ]
        });
    
     
        NovoPT.viewport = new Ext.Viewport({
            id:'simplevp',
            layout:'border',
            loadMask: {msg:'Loading Publication Data...'},
            border:false,
            items:[{
                    region:'west',
                    layout: {
                        type: 'accordion',
                        animate: true
                    },
                    items: [{
                        contentEl: 'west',
                        title: 'New Search',
                        bodyStyle:'padding:5px;',
                        border: false,
                        autoScroll: true,
                        tbar: [{
                            xtype: 'button',
                            text: 'Submit'
                        },{
                            xtype: 'button',
                            text: 'Clear'
                        }]
                    },{
                        title: 'Saved Searches',
                        html: '<p>Some stuff in here.</p>',
                        bodyStyle:'padding:5px;',
                        border: false
                    },{
                        title: 'Auto-Reports',
                        html: '<p>Some stuff in here.</p>',
                        bodyStyle:'padding:5px;',
                        border: false
                    }],
                    layoutConfig:{animate:true},
                    width:200,
                    border:true,
                    title:'Filter By',
                    bodyStyle:'background-color:#ffffff;',
                    collapseMode: 'mini',
                    collapsible:true
                },{
                    id:'details',
                    region:'east',
                    layout:'fit',
                    width:300,
                    //contentEl:'east',
                    border:true,
                    bodyStyle:'background-color:#eae9ee;',
                    collapsible:true,
                    collapsed: true,
                    floatable: false,
                    collapseMode: 'mini',
                    //hideCollapseTool: true,
                    items:[NovoPT.rightTabs]
                },{
                    region:'north',
                    height:144,
                    contentEl:'north',
                    border:false,
                    bodyStyle:'padding:0px;background-color:#ffffff;'
                },{
                    region:'south',
                    height:65,
                    contentEl:'south',
                    border:false,
                    bodyStyle:'background-color:#ffffff;'
                },{
                    region:'center',
                    layout:'fit',
                    border:true,
                    bodyStyle:'background-color:#eae9ee;',
                    items:[NovoPT.centerTabs]
            }]
        });
                        
        NovoPT.ds.load();
        
    }); // eo function onReady
     
    // eof
    Any advice would be greatly appreciated...

  2. #2
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178

    Default

    yes, u can add an textfield into your viewport and enableKeyEvents and then filter your store locally...

    Code:
            var searchField = new Ext.form.TextField({
                allowBlank: true,
                emptyText:'Search',
                enableKeyEvents: true,
                width: 140,
                listeners: {
                    keyup: function(el, type) {
                        var grid = gridToFilter;
                        var needle = 'Band' // filter for speakers
                        grid.store.filter(needle, el.getValue());
                    }
                }
            });

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    23

    Default

    The form inside the region in question is being built on the backend with records from a database. Some are checkboxes and some are text fields. Could I somehow grab those values within an event listener and use them to filter the grid without creating any new Ext.form objects within the docready?

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    23

    Default

    I ended up doing all the filtering on the backend.

  5. #5
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    what you are looking for is filterBy. This is a function, getting each record as param, and you return true for not filtered and false for filtered.
    It's on you to set the conditions for filtering.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    23

    Default

    I solved the solution like this as I wanted to filter and unfilter per click in the tree...

    PHP Code:
    NovoPT.clearingFilters false;
        
    NovoPT.checkedFilters = new Array();
        
    NovoPT.filterStore = {};
        
    NovoPT.tree = new Ext.tree.TreePanel({
            
    //title: 'New Search',
            
    useArrows:true,
            
    //autoScroll:true,
            
    animate:true,
            
    enableDDfalse,
            
    borderfalse,
            
    //containerScroll: true,
            
    rootVisiblefalse,
            
    //frame: true,
            
    root: {
                
    nodeType'async'
            
    },
            
    selModel: new Ext.tree.MultiSelectionModel(),
            
    // auto create TreeLoader
            
    dataUrlWEBROOT 'filters/list_data',

            
    listeners: {
                
    'checkchange': function(nodechecked){
                    var 
    prop_name = (node.parentNode.parentNode.isHiddenRoot()) ? node.parentNode.attributes.text.toLowerCase() : node.parentNode.parentNode.attributes.text.toLowerCase(); 
                    if(
    checked) {
                        if(
    typeof NovoPT.filterStore[prop_name] != "undefined") {
                            
    NovoPT.filterStore[prop_name].push(node.text);
                        } else {
                            
    NovoPT.filterStore[prop_name] = new Array(node.text);
                        }
                        
    NovoPT.tree.selModel.select(node'checkchange'true);
                    } else {
                        if(
    NovoPT.filterStore[prop_name].length 1) {
                            
    NovoPT.filterStore[prop_name].remove(node.text);
                        } else {
                            
    delete NovoPT.filterStore[prop_name];
                        }
                        
    NovoPT.tree.selModel.unselect(node'checkchange'true);
                    }
                    
                    if(!
    NovoPT.clearingFilters) {
                        
    NovoPT.ds.load({params:{filterDataExt.encode(NovoPT.filterStore)}});
                        
    NovoPT.gs.load({params:{filterDataExt.encode(NovoPT.filterStore)}});
                    }
                     
                    
    //NovoPT.tacticsgrid.store.load({params:{filterData: Ext.encode(NovoPT.filterStore)}});

                
    }
            }
            
        }); 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •