static/ext/src/ux/grid/FilterBar.js
function(grid) {
		var me = this;

		me.containers.clear();
		me.fields.clear();
		me.columns.eachKey(function(key, column) {
			var listConfig = column.filter.listConfig || {};
			listConfig = Ext.apply(listConfig, {
				style: 'border-top-width: 1px'
			});
			var plugins = [];
			if (me.showClearButton) {
				plugins.push({
					ptype: 'clearbutton'
				});
			}
			if (me.enableOperators && (column.filter.type == 'date' || column.filter.type == 'int' || column.filter.type == 'float')) {
				plugins.push({
					ptype: 'operatorbutton',
					listeners: {
						operatorchanged: function(txt) {
							if (Ext.isEmpty(txt.getValue())) return;
							me.applyInstantFilters(txt);
						}
					}
				});
			}
			var field = Ext.widget(column.filter.xtype, Ext.apply(column.filter, {
				dataIndex: key,
				flex: 1,
				margin: 0,
				fieldStyle: 'border-left-width: 0px; border-bottom-width: 0px;',
				listConfig: listConfig,
				preventMark: true,
				msgTarget: 'none',
				checkChangeBuffer: 50,
				enableKeyEvents: true,
				listeners: {
					change: me.applyDelayedFilters,
					select: me.applyInstantFilters,
					keypress: function(txt, e) {
						if(e.getCharCode() == 13) {
							e.stopEvent();
							me.applyInstantFilters(txt);
						}
						return false;
					},
					scope: me
				},
				plugins: plugins
			}));
			me.fields.add(column.dataIndex, field);
			var container = Ext.create('Ext.container.Container', {
				dataIndex: key,
				layout: 'hbox',
				bodyStyle: 'background-color: "transparent";',
				width: column.getWidth(),
				items: [field],
				listeners: {
					scope: me,
					element: 'el',
					mousedown: function(e) { e.stopPropagation(); },
					click: function(e) { e.stopPropagation(); },
					dblclick: function(e) { e.stopPropagation(); },
					keydown: function(e) { e.stopPropagation(); },
					keypress: function(e) { e.stopPropagation(); },
					keyup: function(e) { e.stopPropagation(); }
				}
			});
			me.containers.add(column.dataIndex, container);
			container.render(Ext.get(column.id));
        }, me);
		var excludedCols = [];
		if (me.actionColumn) excludedCols.push(me.actionColumn.id);
		if (me.extraColumn) excludedCols.push(me.extraColumn.id);
		Ext.each(me.grid.headerCt.getGridColumns(), function(column) {
			if (!Ext.Array.contains(excludedCols, column.id)) {
				column.setPadding = Ext.Function.createInterceptor(column.setPadding, function(h) {
					if (column.hasCls(Ext.baseCSSPrefix + 'column-header-checkbox')) { //checkbox column
						this.titleEl.setStyle({
                			paddingTop: '4px'
            			});
					}
					return false;
				});
			}
		});


		me.setVisible(me.visible);

		me.renderButtons();

		me.showInitialFilters();
    }
function(grid) {
		var me = this;

		me.containers.clear();
		me.fields.clear();
		me.columns.eachKey(function(key, column) {
			var listConfig = column.filter.listConfig || {};
			listConfig = Ext.apply(listConfig, {
				style: 'border-top-width: 1px'
			});
			var plugins = [];
			if (me.showClearButton) {
				plugins.push({
					ptype: 'clearbutton'
				});
			}
			if (me.enableOperators && (column.filter.type == 'date' || column.filter.type == 'int' || column.filter.type == 'float')) {
				plugins.push({
					ptype: 'operatorbutton',
					listeners: {
						operatorchanged: function(txt) {
							if (Ext.isEmpty(txt.getValue())) return;
							me.applyInstantFilters(txt);
						}
					}
				});
			}
			var field = Ext.widget(column.filter.xtype, Ext.apply(column.filter, {
				dataIndex: key,
				flex: 1,
				margin: 0,
				fieldStyle: 'border-left-width: 0px; border-bottom-width: 0px;',
				listConfig: listConfig,
				preventMark: true,
				msgTarget: 'none',
				checkChangeBuffer: 50,
				enableKeyEvents: true,
				listeners: {
					change: me.applyDelayedFilters,
					select: me.applyInstantFilters,
					keypress: function(txt, e) {
						if(e.getCharCode() == 13) {
							e.stopEvent();
							me.applyInstantFilters(txt);
						}
						return false;
					},
					scope: me
				},
				plugins: plugins
			}));
			me.fields.add(column.dataIndex, field);
			var container = Ext.create('Ext.container.Container', {
				dataIndex: key,
				layout: 'hbox',
				bodyStyle: 'background-color: "transparent";',
				width: column.getWidth(),
				items: [field],
				listeners: {
					scope: me,
					element: 'el',
					mousedown: function(e) { e.stopPropagation(); },
					click: function(e) { e.stopPropagation(); },
					dblclick: function(e) { e.stopPropagation(); },
					keydown: function(e) { e.stopPropagation(); },
					keypress: function(e) { e.stopPropagation(); },
					keyup: function(e) { e.stopPropagation(); }
				}
			});
			me.containers.add(column.dataIndex, container);
			container.render(Ext.get(column.id));
        }, me);
		var excludedCols = [];
		if (me.actionColumn) excludedCols.push(me.actionColumn.id);
		if (me.extraColumn) excludedCols.push(me.extraColumn.id);
		Ext.each(me.grid.headerCt.getGridColumns(), function(column) {
			if (!Ext.Array.contains(excludedCols, column.id)) {
				column.setPadding = Ext.Function.createInterceptor(column.setPadding, function(h) {
					if (column.hasCls(Ext.baseCSSPrefix + 'column-header-checkbox')) { //checkbox column
						this.titleEl.setStyle({
                			paddingTop: '4px'
            			});
					}
					return false;
				});
			}
		});


		me.setVisible(me.visible);

		me.renderButtons();

		me.showInitialFilters();
    }
private