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

    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,582
    Vote Rating
    1136
    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 Software Engineer
    ________________
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,582
    Vote Rating
    1136
    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 Software Engineer
    ________________
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,582
    Vote Rating
    1136
    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 Software Engineer
    ________________
    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
    44
    Vote Rating
    2
    sriram139 is on a distinguished road

      0  

    Default 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
    44
    Vote Rating
    2
    sriram139 is on a distinguished road

      0  

    Default 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