1. #111
    Sencha User
    Join Date
    Sep 2007
    Location
    Norway
    Posts
    12
    Vote Rating
    0
    mpete is on a distinguished road

      0  

    Default


    Hi Leonardo,

    I tried using filter: {type: 'list', listConfig: {width: 500}} , but I cannot see any difference in the rendered combobox. The "dropdown" box/list is still the same width as the field.
    I was expecting the "dropdown" box/list to be wider than the field it self..
    I might be doing this the wrong way ?

    Image:
    combobox.png



    Here's my code:
    Code:
    				// create the Grid
    			    var grid = Ext.create('Ext.grid.Panel', {
    			        store: store,
    					plugins: [{
    			        	ptype: 'filterbar',
    			        	renderHidden: false,
    			        	showShowHideButton: true,
    			        	showClearAllButton: true
    					}],
    			        columns: {
    						plugins: [{
    							ptype: 'gridautoresizer'
    						}],
    			        	items: [{
    			        		text	  : 'Nr.',
    			        		widht	  : 40,
    							dataIndex : '$MeldNr',
    			        		filter	  : {
    			        			type: 'int',
    			        			minValue: 1
    							}
    						},
    			            {
    			                text     : 'Bestiller',
    			                flex     : 0.5,
    			                dataIndex: '$KundeNavn',
    			                filter: {type: 'list', listConfig: {width: 500}}
    			            },
    			            {
    			                text     : 'Ansvarlig',
    			                flex     : 0.5,
    			                dataIndex: '$Ansvarlig',
    			                filter: {type: 'list', listConfig: {width: 500}}
    			            },
    			            {
    			                text     : 'Leveranseansvarlig',
    			                flex     : 0.5,
    			                dataIndex: '$Leveranseansvarlig',
    			                filter: {type: 'list', listConfig: {width: 500}}
    			            },
    			            {
    			                xtype: 'actioncolumnpro',
    			                items: [{
    			                    iconCls: 'domino',
    			                    tooltip: 'Open in Notes client',			                           
    			                    handler : function(grid, rowIndex, colIndex) {
    			                    var rec = store.getAt(rowIndex);
    			                    var docunid = rec.get('@unid');			                    
    			                    window.open(notesurl+docunid, '_blank');			                    
           							}
    			                }]
    			            }
    			        	],
    			        },
    					dockedItems: [{
    						dock: 'top',
    						xtype: 'toolbar',
    						items: [{
    							iconCls: 'add',
    							text: 'Ny oppgave',
    							disabled: false,                    
    							handler : function() {
    								//alert('coming soon..');
    								Ext.MessageBox.show({
    								title: 'Info',
    								msg: 'Scheduled for next version...',
    								buttons: Ext.MessageBox.OK,           				
    								icon: Ext.MessageBox.INFO
    								});	
    							}
    						},'->', {
    							xtype: 'component',
    							itemId: 'status',
    							tpl: 'Displaying {count} tasks',
    							style: 'margin-right:5px'
    						},'->',{
    							iconCls: '',
    							text: currentuser,
    							disabled: true               
    						}]
    					}],
    						features: [groupingFeature],						
    						title: "<a style='cursor:pointer;' href='Notes://DSNotes1/C12572B40034A57D/'><img src='Logo.png'/></a>",						
    						viewConfig: {
    			            stripeRows: true,
    			            loadingText: gridLoadingText
    			        }
    			    });
    Thanks for your help !

    regards,
    Petter Kjeilen

  2. #112
    Sencha User
    Join Date
    Jun 2010
    Location
    Buenos Aires, Argentina
    Posts
    213
    Vote Rating
    9
    ldonofrio will become famous soon enough

      0  

    Default


    Predator,

    I'll look into that

    Quote Originally Posted by predator View Post
    If i may suggest to apply delay for the select event on the list filters, as it is currently set as instant and does not gives the user a chance to set multi choice.

    PHP Code:
    selectme.applyDelayedFilters//original select: me.applyInstantFilters, 

  3. #113
    Sencha User
    Join Date
    Jun 2010
    Location
    Buenos Aires, Argentina
    Posts
    213
    Vote Rating
    9
    ldonofrio will become famous soon enough

      0  

    Default


    Petter,
    You've to use matchFieldWidth: false (defaults to true) check the docs http://docs.sencha.com/ext-js/4-1/#!...atchFieldWidth

    And for multiSelect checkbox combo use this
    js override
    Code:
    // change list base css classes to support checkbox in multiSelect: true
    Ext.define('Ext.override.form.field.ComboBox', {
        override: 'Ext.form.field.ComboBox',
        constructor: function(config) {
            if (Ext.isDefined(config.multiSelect)) {
                if (config.multiSelect) {
                    if (!Ext.isObject(config.listConfig)) config.listConfig = {};
                    config.listConfig.baseCls = Ext.baseCSSPrefix + 'checkboundlist';
                    config.listConfig.itemCls = Ext.baseCSSPrefix + 'checkboundlist-item';
                }
            }
            this.callParent([config]);
        }
    });
    sass override
    Code:
    // multiSelect combos
    $tmpprefix: $prefix;
    $prefix: 'x-check';
    @include extjs-boundlist;
    .#{$prefix}boundlist-item {
        padding: 2px;
        padding-left: 18px;
        background-image: theme-image($theme-name, $menu-icon-unchecked);
        background-repeat: no-repeat;
    }
    
    
    .#{$prefix}boundlist-selected {
        background-image: theme-image($theme-name, $menu-icon-checked);
        background-repeat: no-repeat;
    }
    $prefix: $tmpprefix;

  4. #114
    Sencha User
    Join Date
    Jun 2010
    Location
    Buenos Aires, Argentina
    Posts
    213
    Vote Rating
    9
    ldonofrio will become famous soon enough

      0  

    Default


    I've changed that in my working copy only for multiSelect:true combo filters.
    Thanks

    For now you can use this to patch the plugin:
    Code:
    					select: function(txt) {
    						if (txt.multiSelect) {
    							me.applyDelayedFilters(txt);
    						} else {
    							me.applyInstantFilters(txt);
    						}
    					},
    Quote Originally Posted by predator View Post
    If i may suggest to apply delay for the select event on the list filters, as it is currently set as instant and does not gives the user a chance to set multi choice.

    PHP Code:
    selectme.applyDelayedFilters//original select: me.applyInstantFilters, 

  5. #115
    Sencha User
    Join Date
    Sep 2007
    Location
    Norway
    Posts
    12
    Vote Rating
    0
    mpete is on a distinguished road

      0  

    Default


    Hi Leonardo,

    Thanks, that worked out very well

    Now I have a few new questions..

    First, I´ve implemented remote sorting and filtering on my store because it took to long to filter 3000 records locally. remoteFilter is now set to true.
    But, then I experience that alle the combos and lists are no longer populated with values.
    Do I also have to build the values for these fields on the server now ? Or is that an option ?
    If, I have to build the list of values on the server, how do I config my extjs code to do this ?

    Second, when filtering a date field I can choose like, greater than, smaller than, unlike for comparison. But, I can only choose 1 type of comparison at 1 time. Is is e.g possible to filter a datefield with date greater than + date smaller than ?
    Same for a number field.

    Thanks again for your help

    regards,
    Petter

  6. #116
    Sencha User
    Join Date
    Jun 2010
    Location
    Buenos Aires, Argentina
    Posts
    213
    Vote Rating
    9
    ldonofrio will become famous soon enough

      0  

    Default


    Petter,
    1) For 3000 records i think you need server paging, and this way have no sense to build the lists in the client because you doesn't have all posible values, so you have to do it in the server side, look at the code for "autoStoresRemoteProperty" config option, it defaults to "autoStores" so you have to include that key with the arrays in the server response.
    Take a look at "fillAutoStores" private method that build the stores based on that property in the response.
    Also "autoStoresRemoteProperty" is used in the request to notify the server what fields you need to collect unique values.

    2) No there is no way, i've no implemented number/date ranges

    Regards
    Leonardo

    Quote Originally Posted by mpete View Post
    Hi Leonardo,

    Thanks, that worked out very well

    Now I have a few new questions..

    First, I´ve implemented remote sorting and filtering on my store because it took to long to filter 3000 records locally. remoteFilter is now set to true.
    But, then I experience that alle the combos and lists are no longer populated with values.
    Do I also have to build the values for these fields on the server now ? Or is that an option ?
    If, I have to build the list of values on the server, how do I config my extjs code to do this ?

    Second, when filtering a date field I can choose like, greater than, smaller than, unlike for comparison. But, I can only choose 1 type of comparison at 1 time. Is is e.g possible to filter a datefield with date greater than + date smaller than ?
    Same for a number field.

    Thanks again for your help

    regards,
    Petter

  7. #117
    Sencha Premium Member
    Join Date
    Aug 2011
    Posts
    23
    Vote Rating
    0
    reweiner is on a distinguished road

      0  

    Default


    Hi Leonardo,

    Thanks for the great work.

    I think I might have found a problem.

    I'm using 'reconfigure' in my grid. One grid I want to have the FilterBar and another one I don't. So I setup 'filter: true' in the columns I want.

    Then it renders the filter with no FilterBar -> OK
    When I fire the reconfigure event for the new columns with the FilterBar it 'crashes' on function 'renderFilterBar' (around line 530):

    PHP Code:
    var container Ext.create('Ext.container.Container'
    {
                    
    dataIndexkey,
                    
    layout'hbox',
                    
    bodyStyle'background-color: "transparent";',
    --->                
    widthcolumn.getWidth(),
                    
    items: [field],
                    
    listeners: {
                        
    scopeme,
                        
    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(); }
                    }
                }); 
    I don't know exactly why but I believe is due to the FilterBar has not been displayed yet.

    Thanks
    R.

  8. #118
    Sencha User
    Join Date
    Nov 2012
    Posts
    11
    Vote Rating
    0
    gayathr is on a distinguished road

      0  

    Default


    Great Plugin .It helps me a lot Thanks a lot

  9. #119
    Sencha User
    Join Date
    Jun 2011
    Location
    Bologna, Italy
    Posts
    4
    Vote Rating
    0
    alessiom is on a distinguished road

      0  

    Default Date and number range

    Date and number range


    Hi all.
    Thank you very much for the plugin! It is exactly what we were looking for.
    I have implemented date and number ranges.
    Here is the diff
    PHP Code:
    --- FilterBarOriginal.js    2012-11-29 09:22:14.000000000 +0100
    +++ FilterBar.js    2012-11-29 09:45:57.000000000 +0100
    @@ -542,13 +542,43 @@
                     },
                     
    pluginsplugins
                 
    }));
    +            if (
    column.range && ((column.filter.xtype == 'datefield') || (column.filter.xtype == 'numberfield'))) {
    +                var 
    field2 Ext.widget(column.filter.xtypeExt.apply(column.filter, {
    +                    
    dataIndexkey,
    +                    
    flex1,
    +                    
    margin0,
    +                    
    fieldStyle'border-left-width: 0px; border-bottom-width: 0px;',
    +                    
    listConfiglistConfig,
    +                    
    preventMarktrue,
    +                    
    msgTarget'none',
    +                    
    checkChangeBuffer50,
    +                    
    enableKeyEventstrue,
    +                    
    listeners: {
    +                        
    changeme.applyDelayedFilters,
    +                        
    selectme.applyInstantFilters,
    +                        
    keypress: function(txte) {
    +                            if (
    e.getCharCode() == 13) {
    +                                
    e.stopEvent();
    +                                
    me.applyInstantFilters(txt);
    +                            }
    +                            return 
    false;
    +                        },
    +                        
    scopeme},
    +                        
    pluginsplugins
    +
    +                }));
    +                var 
    items = [fieldfield2];
    +            } else {
    +                var 
    items = [field];
    +            }
                 
    me.fields.add(column.dataIndexfield);
    +            
    me.fields.add(column.dataIndexfield2);
                 var 
    container Ext.create('Ext.container.Container', {
                     
    dataIndexkey,
                     
    layout'hbox',
                     
    bodyStyle'background-color: "transparent";',
                     
    widthcolumn.getWidth(),
    -                
    items: [field],
    +                
    itemsitems,
                     
    listeners: {
                         
    scopeme,
                         
    element'el',
    @@ -
    675,+705,@@
             }
             var 
    myIndex = -1;
             
    Ext.each(me.filterArray, function(item2indexallItems) {
    -            if(
    item2.property === column.dataIndex) {
    +            if (
    item2.id === ('filter-' field.id)) {
                     
    myIndex index;
                 }
             });
    @@ -
    738,12 +768,14 @@
                     }
                     
    me.filterArray.push(Ext.create('Ext.util.Filter', {
                         
    propertycolumn.dataIndex,
    +                    
    id'filter-' field.id,
                         
    filterFnfilterFn,
                         
    meme
                     
    }));
                 } else {
                     
    me.filterArray.push(Ext.create('Ext.util.Filter', {
                         
    propertycolumn.dataIndex,
    +                    
    id'filter-' field.id,
                         
    valuenewVal,
                         
    typecolumn.filter.type,
                         
    operator: (field.operator || column.filter.operator
    To use the range just add a "range: true" option to the column definition and a couple of field will appear under the column header. The appear awful (especially the date fields), but they work. Corrections and suggestions are welcome, of course.

    Just a question: could you please explain how to populate lists and combos in case of remote filtering? I have studied the code (and I will continue to), but I did not understood.

    Regards.

    Alessio

  10. #120
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
    Fioenix is on a distinguished road

      0  

    Default


    I'm sorry. My English isn't good ^^

    There is an issue of showing when we use the grid with group-headers:

    12-1-2012 11-22-04 AM.jpg

    I referred to http://www.sencha.com/forum/showthre...rid.xFilterRow. I think that moving the filter containers to a filter bar is a better solution.

    I tried editing FilterBar.js by replacing me.containers with the filter bar:

    Replaces:
    Code:
    me.containers = Ext.create('Ext.util.MixedCollection');
    with:
    Code:
            me.filterBar = Ext.create('Ext.container.Container', {  // adds a filter bar to grid            id: grid.id + '-filter-bar',
                weight: 100,
                height: 23,
                dock: 'top',
                border: true,
                baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
                style: 'border-top-color: #c5c5c5;',
                layout: {
                    type: 'hbox'
                }
            });
    Replaces:
    Code:
            me.containers.each(function(item) {            Ext.destroy(item);
            });
            me.containers.clear();
            me.containers = null;
    with:
    Code:
            // Filter bar        me.filterBar.removeAll();
            me.filterBar = null;
    Replaces:
    Code:
    me.containers.clear();
    with:
    Code:
    me.filterBar.removeAll();
    Replaces:
    Code:
    var container = Ext.create('Ext.container.Container', {
    with:
    Code:
                var container = Ext.create('Ext.container.Container', {                id: grid.id + '-filter-container-' + column.dataIndex,
                    baseCls: Ext.baseCSSPrefix + 'column-header',
    Replaces:
    Code:
                me.containers.add(column.dataIndex, container);
                container.render(Ext.get(column.id));
    with:
    Code:
    me.filterBar.add(container);    // adds the container to filterBar
    Replaces:
    Code:
    var item = me.containers.get(dataIndex);
    with:
    Code:
    var item = me.filterBar.getComponent(me.grid.id + '-filter-container-' + dataIndex);
    Replaces:
    Code:
            me.containers.each(function(item) {            item.setVisible(visible);
            });
    with:
    Code:
    me.filterBar.setVisible(visible);
    This is the result:

    12-1-2012 1-31-30 PM.jpg
    Attached Images

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."