1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Russia, Krasnodar
    Posts
    20
    Vote Rating
    0
    guyfawkes is on a distinguished road

      0  

    Lightbulb ExtJS 4 Grid Filtering issue: no searching icon in StringFilter

    ExtJS 4 Grid Filtering issue: no searching icon in StringFilter


    You can see this issue in this example: http://docs.sencha.com/ext-js/4-0/#!/example/grid-filtering/grid-filter-local.html
    Try to filter "Company" column, and you will not see any icon near text field.
    I got some source code from RangeMenu (my idea was the principle of working NumberFilter) to fix this issue (please replace all "Ext4" to "Ext"):

    PHP Code:
    init : function (config) {
            
    Ext4.applyIf(config, {
                
    enableKeyEvents true,
                
    hideLabel       false,
                
    fieldLabel      this.getIconTpl().apply({
                    
    cls  this.iconCls || 'no-icon',
                    
    text this.emptyText || '',
                    
    src  Ext4.BLANK_IMAGE_URL
                
    }),
                
    labelSeparator  '',
                
    labelWidth      29,
                
    listeners       : {
                    
    scope this,
                    
    keyup this.onInputKeyUp,
                    
    el    : {
                        
    click : function (e) {
                            
    e.stopPropagation();
                        }
                    }
                }
            });

            
    this.inputItem Ext4.create('Ext4.form.field.Text'config);
            
    this.menu.add(this.inputItem);
            
    this.updateTask Ext4.create('Ext4.util.DelayedTask'this.fireUpdatethis);
        },

        
    /**
         * Возвращает шаблон иконки
         * @return {Ext4.XTemplate}
         */
        
    getIconTpl : function () {
            return 
    Ext4.create('Ext4.XTemplate',
                
    '<img src="{src}" alt="{text}" class="' Ext4.baseCSSPrefix 'menu-item-icon ux-rangemenu-icon {cls}" />'
            
    );
        }, 

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,524
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The reason you are not seeing an icon is because it's only a text field in that menu which doesn't accept an iconCls.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    Russia, Krasnodar
    Posts
    20
    Vote Rating
    0
    guyfawkes is on a distinguished road

      0  

    Default


    Main reason is you do not want to admit one's fault. There is find.png icon, there is CSS, there is code in StringFilter to use style from CSS!

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,524
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by guyfawkes View Post
    Main reason is you do not want to admin one's fault.
    Don't understand.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Location
    Russia, Krasnodar
    Posts
    20
    Vote Rating
    0
    guyfawkes is on a distinguished road

      0  

    Default


    See your own example, see your own source code.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,524
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by guyfawkes View Post
    See your own example, see your own source code.
    Yes, and the reason is because it's only a textfield now for string filter.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Apr 2010
    Location
    Russia, Krasnodar
    Posts
    20
    Vote Rating
    0
    guyfawkes is on a distinguished road

      0  

    Exclamation


    Okay, and what is the reason to have:
    1) find.png icon in images
    2) CSS rule which uses this icon
    3) Source code which uses this css rule as iconCls
    ?!!

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    41
    Vote Rating
    2
    sriram139 is on a distinguished road

      0  

    Default Example code has iconCls defined which is not displayed

    Example code has iconCls defined which is not displayed


    In Ext4 Examples code, Local Grid filter has iconCls defined in StringFilter.
    But, textField config doesnt have such config, so it is not displayed at all.

    Need to provide an alternative to display this icon. If not the separation line behind the textfield is not looking good. You can see this in the examples provided with latest version too.

    guyfawkes,
    Even your code doesnt display that. I tried it with Ext 4.1.1.

    Thanks,
    Sriram

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    41
    Vote Rating
    2
    sriram139 is on a distinguished road

      0  

    Default Find icon displayed after some trials.. :)

    Find icon displayed after some trials.. :)


    It worked using below code in StringFilter.js:

    Ext.applyIf(config, {
    enableKeyEvents: true,
    labelCls: 'ux-rangemenu-icon '+this.iconCls,
    hideEmptyLabel: false,
    labelSeparator: '',
    labelWidth: 29,
    ...
    });

    Thanks,
    Sriram