Grid local filtering?

[maork]

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 :

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'
        }
    ]
    });

[jorgeluislay]

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);
}
}
]

[maork]

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

btw, again thanks!

[maork]

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

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?

[jorgeluislay]

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

// in this part you can put some funcitons
        
        Ext.apply(this, {
            store: ds,
            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);
                }
            }],
            view: new Ext.grid.GridView({
                forceFit: !Ext.isIE6
            }),
            cm: new Ext.grid.ColumnModel([
        {
            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'
        }]),
            viewConfig: {
                forceFit: !Ext.isIE6,
                emptyText: 'Keine Daten vorhanden'
            },
            sm: new Ext.grid.RowSelectionModel({singleSelect: true})
            });


        my.app.superclass.initComponent.apply(this, arguments);
    } // 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