Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    3
    Vote Rating
    0
    maork is on a distinguished road

      0  

    Default Grid local filtering?

    Grid local filtering?


    hi,
    i have a grid with an array store. i want to put a filter string, but no matter how i try to do this, i have js error or its just dosn't work. its is possible to filter local project?
    btw i run this project with iis on localhost.

    if its help here is my code :
    Code:
    Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', 'ux');
    
    
    
    
    //Model
    Ext.define('Purchase_History', {
        extend: 'Ext.data.Model',
        fields: [ 'name', 'last_name', 'Product' ,  'Price' , 'Gender' ]
    	
    });
    
    
    
    
    //Store (Database)
    var Purchase_History_Stor = Ext.create('Ext.data.Store', {
        model: 'Purchase_History',
        groupField: 'Gender',
    	remoteFilter: false,
        data: [
            { name: 'Maor', last_name: 'Genis', Product: 'Tablet' , Price: 300, Gender: 'Male' },
    		{ name: 'Dana', last_name: 'Vaizer', Product: 'Charger' , Price: 45  , Gender: 'Female' },
    		{ name: 'Shlomo', last_name: 'Choen', Product: 'Laptop' , Price: 2400 , Gender: 'Male'  },
    		{ name: 'Avi', last_name: 'Kataln', Product: 'Speakers' , Price: 250 , Gender: 'Male'  },
    		{ name: 'Ira', last_name: 'Brele', Product: 'iPhone' , Price: 3500, Gender: 'Female'  },
    		{ name: 'Sivan', last_name: 'Medir', Product: 'Ipad' , Price: 2800 , Gender: 'Male'  },
    		{ name: 'Sasha', last_name: 'Novik', Product: '24" Screen' , Price: 900, Gender: 'Male'   },
    		{ name: 'Lital', last_name: 'Baret', Product: '19" Screen' , Price: 600 , Gender: 'Female'  }
    		
        ]
    });
    
    
    
    
    //Gruop by Gender View
     var GenderGrouping = Ext.create('Ext.grid.feature.Grouping',{
            groupHeaderTpl: 'Gender: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
            hideGroupedHeader: true
        });
    	
    
    
    	
    //Rander Database Grid (View)
    Ext.create('Ext.grid.Panel', {
        renderTo: 'GridContainer',
        store: Purchase_History_Stor,
        width: 400,
        height: 218,
    	iconCls: 'icon-grid',
        title: 'Purchase History',
    	features: [GenderGrouping],
    	
        columns: [
            {
                text: 'Name',
                width: 100,
                sortable: true,
                hideable: false, 
    			filterable: true,
                dataIndex: 'name'
    			
            },
    		        {
                text: 'Last Name',
                width: 100,
                sortable: true,
                hideable: false,
                dataIndex: 'last_name'
            },
    
    
    		        {
                text: 'Product',
                width: 100,
                sortable: true,
                hideable: false,
                dataIndex: 'Product'
            },
    
    
    		        {
                text: 'Price',
                width: 100,
                sortable: true,
                hideable: false,
                dataIndex: 'Price'
            }
        ]
        });

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    63
    Vote Rating
    0
    jorgeluislay is an unknown quantity at this point

      0  

    Default


    Set a tbar on the grid and add a textfield and if you want to, put a button like this:

    tbar: ['Search field: ', {
    xtype: 'textfield',
    name: 'search',
    id: 'search',
    emptyText: 'type string',
    enableKeyEvents: true, //for enter key
    width: 150,
    listeners: {
    keypress: function(f, e){
    if (e.getKey() == e.ENTER) {
    var a = Ext.getCmp('search').getValue();
    Ext.getCmp('yourGridId').getStore().filter('recordYouWantToFilter', a, true,true);
    //read more in the api of a store -> filter
    }
    },
    keyup : function(f, e) { //autonatically if you are typing a letter will filter your store
    var a = this.getRawValue(); //the letter you type in the textfield
    Ext.getCmp('yourGridId').getStore().filter('recordYouWantToFilter',a, true,true);
    }
    }

    }
    },{
    xtype: 'button', //if you need a button after the textfield
    scope: this,
    iconCls:'icon-magnifier',
    handler: function(){
    var a = Ext.getCmp('search').getValue();
    Ext.getCmp('yourGridId').getStore().filter('recordYouWantToFilter', a, true,true);
    }
    }
    ]

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    3
    Vote Rating
    0
    maork is on a distinguished road

      0  

    Default thanks!

    thanks!


    where should i writ this function?
    after the "Ext.create"?

    btw, again thanks!

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    3
    Vote Rating
    0
    maork is on a distinguished road

      0  

    Default i figure this out

    i figure this out


    i put the button insid "Ext.create('Ext.grid.Panel" after the "columns: []" section.

    Code:
    Ext.create('Ext.grid.Panel', {    renderTo: 'GridContainer',
        store: Purchase_History_Stor,
        width: 400,
        height: 218,
    	iconCls: 'icon-grid',
        title: 'Purchase History',
    	features: [GenderGrouping],
        columns: [
            {
                text: 'Name',
                width: 100,
                sortable: true,
                hideable: false, 
                dataIndex: 'name'
    			
            },
    		        {
                text: 'Last Name',
                width: 100,
                sortable: true,
                hideable: false,
                dataIndex: 'last_name'
            },
    
    
    		        {
                text: 'Product',
                width: 100,
                sortable: true,
                hideable: false,
                dataIndex: 'Product'
            },
    
    
    		        {
                text: 'Price',
                width: 100,
                sortable: true,
                hideable: false,
                dataIndex: 'Price'
            }
        ],
    	tbar: ['Search field: ', {
    xtype: 'textfield',
    name: 'search',
    id: 'search',
    emptyText: 'type string',
    enableKeyEvents: true, //for enter key
    width: 150,
    listeners: {
    keypress: function(f, e){ 
    if (e.getKey() == e.ENTER) {
    var a = Ext.getCmp('search').getValue();
    Ext.getCmp('gridpanel-1009').getStore().filter('name', a, true,true);
    //read more in the api of a store -> filter
    }
    },
    keyup : function(f, e) { //autonatically if you are typing a letter will filter your store
    var a = this.getRawValue(); //the letter you type in the textfield
    Ext.getCmp('gridpanel-1009').getStore().filter('last_name',a, true,true);
    }
    }
    
    
    },{
    xtype: 'button', //if you need a button after the textfield
    scope: this,
    iconCls:'icon-magnifier',
    handler: function(){
    var a = Ext.getCmp('search').getValue();
    Ext.getCmp('gridpanel-1009').getStore().filter('Product', a, true,true);
    }
    }
    ]
    });
    but i get an java script error

    "Uncaught TypeError: Cannot read property 'dom' of null"

    im doing something wrong?

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    63
    Vote Rating
    0
    jorgeluislay is an unknown quantity at this point

      0  

    Default


    PHP Code:
    Ext.ns('my.app');
    my.app Ext.extend(Ext.grid.GridPanel, {
            
    parameter"",
            
    loadMasktrue,
            
    stateEvents: ['statechange'],
            
    statefultrue,
            
    initComponent: function() {
    //        function(){
    //        
    //        }
            
            // or
            
    //        var ds = store();

    // in this part you can put some funcitons
            
            
    Ext.apply(this, {
                
    storeds,
                
    tbar : ['Search field: ', {
                    
    xtype 'textfield',
                    
    name 'search',
                    
    id 'search',
                    
    emptyText 'type string',
                    
    enableKeyEvents true// for enter key
                    
    width 150,
                    
    listeners : {
                        
    keypress : function(fe) {
                            if (
    e.getKey() == e.ENTER) {
                                var 
    Ext.getCmp('search').getValue();
                                
    Ext.getCmp('gridpanel-1009').getStore().filter(
                                        
    'name'atruetrue);
                                
    // read more in the api of a store -> filter
                            
    }
                        },
                        
    keyup : function(fe) { // autonatically if you are
                                                    // typing a letter will filter
                                                    // your store
                            
    var this.getRawValue(); // the letter you type in
                                                        // the textfield
                            
    Ext.getCmp('gridpanel-1009').getStore().filter(
                                    
    'last_name'atruetrue);
                        }
                    }

                }, {
                    
    xtype 'button'// if you need a button after the textfield
                    
    scope this,
                    
    iconCls 'icon-magnifier',
                    
    handler : function() {
                        var 
    Ext.getCmp('search').getValue();
                        
    Ext.getCmp('gridpanel-1009').getStore().filter('Product',
                                
    atruetrue);
                    }
                }],
                
    view: new Ext.grid.GridView({
                    
    forceFit: !Ext.isIE6
                
    }),
                
    cm: new Ext.grid.ColumnModel([
            {
                
    text'Name',
                
    width100,
                
    sortabletrue,
                
    hideablefalse
                
    dataIndex'name'
                
            
    },
                    {
                
    text'Last Name',
                
    width100,
                
    sortabletrue,
                
    hideablefalse,
                
    dataIndex'last_name'
            
    },


                    {
                
    text'Product',
                
    width100,
                
    sortabletrue,
                
    hideablefalse,
                
    dataIndex'Product'
            
    },{
                
    text'Price',
                
    width100,
                
    sortabletrue,
                
    hideablefalse,
                
    dataIndex'Price'
            
    }]),
                
    viewConfig: {
                    
    forceFit: !Ext.isIE6,
                    
    emptyText'Keine Daten vorhanden'
                
    },
                
    sm: new Ext.grid.RowSelectionModel({singleSelecttrue})
                });


            
    my.app.superclass.initComponent.apply(thisarguments);
        } 
    // eo function initComponent
    });
    Ext.reg('my-app'my.app); 
    I register always the components and use initComponent, so i dont have to do that work and save a lot of time. now should be your grid in this xtype registered:
    xtype:'my-app'
    I tried the code i send you again and it worked fine for me.

    Try to find the way how to add tbar stuff to your grid, textfields, buttons, labels, whatever. Read the api if you need it but it should work and if not try debbuging a little bit

Thread Participants: 1