Ext.ux.grid.Search

[wemerson.januario]

nice. tested with extjs 3.2.1. version. OK

[medusadelft]

Thanks for this, it's a nice plugin!
Does anyone know how I can set an Id for this plugin, so I can get this plugin to disable it. I noticed there is a setDisabled function, but I can't get it (with Ext.get of Ext.getCmp) when I give it an Id.

Thanks in advance!
Maurice

[gabrieaj]

Hi,

I am trying to make this plugin work with one of our application which uses extjs 2.0.
Client does not want to upgrade to new versions of extjs.
It gives me error on "tb.insert is not a function".

Please could some one help me on this.

Thanks & Regards,
Ajay.

[tobiu]

take a look at the ext2 ux forums,

i just migrated sakis plugin from ext 2 to ext 3, so you definitely should be able to find it there


best regards
tobiu

[gabrieaj]

Thanks a lot for your help.

Thanks & Regards,
Ajay

[venkateshns]

Will the same plugin approach applicable for EXTJS 4.0.2 ?

[pouniok]

Hi,



I was wondering if someone tried this plugin with toolbar enableOverflow set to true ?

When my screen is too small, the search field is hidden, but when I click on the overflow button, I don't see it in the overflow menu.

I found that ToolbarLayout handle only buttons, splitbuttons and button groups components (in Ext.layout.ToolbarLayout.addComponentToMenu). So I added a few lines to handle classic components but I just can't make it work for now.

Then, I found that in my Ext 3.4 ext-all.js file, the declaration : Ext.reg('twintrigger', Ext.form.TwinTriggerField); was missing, and xtype is required by menu to add menu items. But it doesn't helped.



The must would have been to have a config option in toolbar components to say if they can be hidden or not when overflow is reached, so I could have set the search plugin to be the last thing to be hidden in the toolbar.


I will be glad for any help

Thanks,
Pouniok.

-------------------------------------
EDIT
-------------------------------------

I make it worked with these fixes :

Added an option "noOverflow" to the plugin button and field

tb.add({
  text:this.searchText
    ,menu:this.menu
    ,noOverflow:true
    ,iconCls:this.iconCls
});

this.field = new Ext.form.TwinTriggerField({
  width:this.width
  ,noOverflow:true
    ...
}); 

Then, overrieded the ToolbarLayout.fitToSize code

Ext.override(Ext.layout.ToolbarLayout, {
    fitToSize : function(target) {
     if (this.container.enableOverflow === false) {
         return;
     }
    
     var width       = target.dom.clientWidth,
         tableWidth  = target.dom.firstChild.offsetWidth,
         clipWidth   = width - this.triggerWidth,
         lastWidth   = this.lastWidth || 0,
    
         hiddenItems = this.hiddenItems,
         hasHiddens  = hiddenItems.length != 0,
         isLarger    = width >= lastWidth;
    
     this.lastWidth  = width;
    
     if (tableWidth > width || (hasHiddens && isLarger)) {
         var items     = this.container.items.items,
             len       = items.length,
             loopWidth = 0,
             minWidth  = 0,
             item;
             
          
         for (var i = 0; i < len; i++) {
             item = items[i];
    
             if (item.noOverflow == true) {
              minWidth += this.getItemWidth(item);
             }
         }
         loopWidth = minWidth;
          
         
         for (var i = 0; i < len; i++) {
             item = items[i];
    
              if (!item.isFill && !item.noOverflow) {
                 loopWidth += this.getItemWidth(item);
                 if (loopWidth > clipWidth) {
                     if (!(item.hidden || item.xtbHidden)) {
                         this.hideItem(item);
                     }
                 } else if (item.xtbHidden) {
                     this.unhideItem(item);
                 }
             }
         }
     }
    
     //test for number of hidden items again here because they may have changed above
     hasHiddens = hiddenItems.length != 0;
    
     if (hasHiddens) {
         this.initMore();
    
         if (!this.lastOverflow) {
             this.container.fireEvent('overflowchange', this.container, true);
             this.lastOverflow = true;
         }
     } else if (this.more) {
         this.clearMenu();
         this.more.destroy();
         delete this.more;
    
         if (this.lastOverflow) {
             this.container.fireEvent('overflowchange', this.container, false);
             this.lastOverflow = false;
         }
     }
    }
});