Ext.ux.form.field.BoxSelect - Intuitive Multi-Select ComboBox

[abraxxa]

Are you guys really that blind? Two posts above plus on the first page of the ux subforum.

[jmaia]

Guys,

Has anyone had problems with the width of this component after upgrading to 4.1 ? I have, all BoxSelect form fields and extensions that I had on my application suddenly got shrinked to a smaller width than before (when I was still on 4.0.7).

I solved this by overriding the following method on the BoxSelect code:

/**
 * Overridden to avoid use of placeholder, as our main input field is often empty
 */
afterRender: function() {
    var me = this;


    if (Ext.supports.Placeholder && me.inputEl && me.emptyText) {
        delete me.inputEl.dom.placeholder;
    }


    if (me.stacked === true) {
        me.itemList.addCls('x-boxselect-stacked');
    }


    if (me.grow) {
        if (Ext.isNumber(me.growMin) && (me.growMin > 0)) {
            me.itemList.applyStyles('min-height:'+me.growMin+'px');
        }
        if (Ext.isNumber(me.growMax) && (me.growMax > 0)) {
            me.itemList.applyStyles('max-height:'+me.growMax+'px');
        }
    }


    me.applyMultiselectItemMarkup();


    me.inputCell.setWidth('100%');
    
    me.callParent(arguments);


}

The only thing I did was add the following line at the end of the method before the call to callParent.

me.inputCell.setWidth('100%');

That seemed to have done the trick for me. I have tested it with fixed with as well as with anchor percentages and it seems to be working. Further tests are needed though.

Anyway, just my 2 cents...

Regards,

Joao Maia

[jmaia]

Guys,

Has anyone had problems with the width of this component after upgrading to 4.1 ? I have, all BoxSelect form fields and extensions that I had on my application suddenly got shrinked to a smaller width than before (when I was still on 4.0.7).

I solved this by overriding the following method on the BoxSelect code:

False alarm guys...

It looked like the width problem was solved by that override, but thorough testing showed that it does not work on Chrome, just on IE and Firefox, and even so, only in some situations...

Well, back to the drawing board, I guess

Any news on updates for this component for Ext 4.1 ? I'm somewhat reticent to use Christophe Geiser's new version for 4.1 because I already had some components of my own inheriting from this version.

Regards,

Joao Maia

[Tim Toady]

The problem with this component in 4.1 is that the layout (Ext.layout.component.field.Field) that it is extending at the bottom has had significant changes. The sizeBodyContents function is no longer called. For my purposes, I just overrode the beginLayout function and called sizeBodyContents manually. Then I had to fix that function because it calls a few methods that no longer exist.

There may be more issues and I haven't tested extensively, but this was good enough for the issues I was hitting with it.

--edit--

Also, there is a var defined called useNewSelectors. It kills ie for 4.1. I just set it to false rather than figure out why.

[User 0815]

The problem with this component in 4.1 is that the layout (Ext.layout.component.field.Field) that it is extending at the bottom has had significant changes. The sizeBodyContents function is no longer called. For my purposes, I just overrode the beginLayout function and called sizeBodyContents manually. Then I had to fix that function because it calls a few methods that no longer exist.

There may be more issues and I haven't tested extensively, but this was good enough for the issues I was hitting with it.

I think it is sufficient if you set the config 'componentLayout' to 'combobox':

{
  xtype: 'boxselect',
  componentLayout: 'combobox'
  ...
} 

--edit--

Also, there is a var defined called useNewSelectors. It kills ie for 4.1. I just set it to false rather than figure out why.

Thanks, that was the missing piece for IE7 and IE8. For me, boxselect works now with ExtJS 4.1.

[alicexyl]

What event handlers can we write for this widget? Will it support 'beforeAddItem', 'additem', etc. that SuperBoxSelect did?

[kveeiv]

Well, at long last I have had some time to update this for 4.1! There were a lot of pull requests that have been made since the last release, a variety of feature requests, and a litany of underlying framework changes to test for and take advantage of.

Thanks to everyone for all of your patience and contributions. I am glad things have remained stable for those who have not moved from the 4.0.x release line. For those still using 4.0.x, please do not use this upgrade as I have not maintained backwards compatibility to the old rendering and element handling methodology. I still have some projects that are on 3.x, I feel your pain. One day maybe we'll all have the time to keep everything as up to date as we'd like!

The big bullet points for this release:
* Upgrades to the rendering to take more advantage of the improved 4.1 layout mechanisms
* The often requested ability to filter out selected values from the drop down pick list (via the new filterPickList option)
* The ability to paste values in and have them automatically parsed into new/existing selections (for example, with email addresses).

I tried to take advantage of everyone's pull requests and contributions that have been made here in this thread. I had fallen so far behind that some things were already addressed by the framework, and others I wasn't sure about but couldn't reproduce anymore. I chalked some of those up to possible framework fixes as well. If you see any problems, please feel free to also add an update to the examples/boxselect files with the test case that is failing as you submit a pull request. In addition to providing a valuable reference resource for everyone using this extension, this page is also used as a bunch of use cases to test against to ensure that functionality continues to work as advertised in the future.

This release has been tested with safari, chrome, firefox and IE 8. I don't have a machine with other versions of IE handy at the moment and didn't want to delay this release for even a few more hours. If anyone else can help with the testing of those it would be much appreciated!

[ngd]

Kvieev: thanks for such a great plugin and thanks for the new 4.1 version.

I notice there is a bug on the examples page (http://kveeiv.github.com/extjs-boxse...boxselect.html) in the section Automatic querying of remote stores for unknown values. The selector just doesn't work. I am using the latest version of Chrome. It also doesn't work in IE9.

Thanks.

[kveeiv]

Kvieev: thanks for such a great plugin and thanks for the new 4.1 version.

I notice there is a bug on the examples page (http://kveeiv.github.com/extjs-boxse...boxselect.html) in the section Automatic querying of remote stores for unknown values. The selector just doesn't work. I am using the latest version of Chrome. It also doesn't work in IE9.

Thanks.

I'll add a note to that example in the next commit, but you can't use php scripts in the github hosted public pages so that script won't work on that demo page. If you pull down the zip file and run it from a web server with php, it should work fine. Let me know if it doesn't.

[Tim Toady]

Thanks for the update Kveeiv. Your code is very clean and well written. There is a minor bug with setValue that I fixed on my system for the last version that still exists in the new version. What happens is when you have it in a form and do loadRecord it inadvertantly changes an array of ids to an array of records. The simple solution is to clone the variable "value" at the top of the function so that it doesn't change the loaded record.

--edit--
Actually, a slightly cleaner approach would be to add true as the second param on the Ext.Array.from that is already there to return a new reference