[3.x] Ext.ux.form.SuperBoxSelect

**DigitalSkyline** · 29 May 2009 1:59 PM

The best version yet. Great!

**danh2000** · 3 Jun 2009 12:36 AM

Originally Posted by wojan

Nice extension!

FYI - I had an issue in IE 8 where when you closed one of the selected items, it was hidden but not actually removed from the dom.

Fixed with the 3.0 RC2 release

Originally Posted by DigitalSkyline

The best version yet. Great!

Thanks

**Scorpie** · 4 Jun 2009 10:50 PM

Pure ownage.

**supercharge2** · 5 Jun 2009 6:37 AM

I am trying to use the SuperBoxSelect in a wizard using a card layout. Since going to 3.0rc2 (worked fine in rc1.1), whenever I click away from the box the contents clear. I put the box into various other test scenerios such as a toolbar and the same thing occurs. It seems fine in your example renderd to a div in the page. As one post suggested it may be that the code is using the private doForce() method which has been changed to beforeBlur() in rc2. Any chance you could check on this?

**Animal** · 6 Jun 2009 9:42 AM

Beautiful work! Should really be on the ExtJs main site as an example. And should be part of the UX download package!

**danh2000** · 8 Jun 2009 12:56 AM

Originally Posted by supercharge2

I am trying to use the SuperBoxSelect in a wizard using a card layout. Since going to 3.0rc2 (worked fine in rc1.1), whenever I click away from the box the contents clear. I put the box into various other test scenerios such as a toolbar and the same thing occurs. It seems fine in your example renderd to a div in the page. As one post suggested it may be that the code is using the private doForce() method which has been changed to beforeBlur() in rc2. Any chance you could check on this?

Do you have an example page that I could take a look at please? Someone else reported an issue with blur that I haven't been able to re-produce. I'd appreciate being able to debug the issue.

Originally Posted by Animal

Beautiful work! Should really be on the ExtJs main site as an example. And should be part of the UX download package!

Thanks Animal, high praise indeed from you - I've always been impressed with your own work. There are still a few issues and there's some refactoring to do but I'd be happy for the code be used as a demo. I'll try to get a move on with the updates!

I've got another little component I'll release v. soon too!

**supercharge2** · 8 Jun 2009 6:29 AM

I dropped this into a grid toolbar as one of my tests and it had the problem:

Code:

{
    xtype: 'superboxselect',
    fieldLabel: 'Products',
    width: 300,
    hideOnSelect: false,
    maxHeight: 200,
    store: auxillaryListStore,
    triggerAction: 'all',
    valueField: 'AuxillaryId',
    displayField: 'AuxillaryDescription',
    hiddenName: 'AuxillaryId',
    mode: 'local'
}

Then the grid into a layout and then viewport

Code:

var layout = new Ext.Panel({
    title: 'Employee Salary by Month',
    layout: 'border',
    layoutConfig: {
        columns: 1
    },
    width: 600,
    height: 600,
    items: [chart, grid]
});
new Ext.Viewport({
    layout: 'fit',
    items: [layout]
});
//layout.render(Ext.getBody());

**danh2000** · 8 Jun 2009 4:45 PM

Originally Posted by supercharge2

I dropped this into a grid toolbar as one of my tests and it had the problem:

Code:

{
    xtype: 'superboxselect',
    fieldLabel: 'Products',
    width: 300,
    hideOnSelect: false,
    maxHeight: 200,
    store: auxillaryListStore,
    triggerAction: 'all',
    valueField: 'AuxillaryId',
    displayField: 'AuxillaryDescription',
    hiddenName: 'AuxillaryId',
    mode: 'local'
}

Then the grid into a layout and then viewport

Code:

var layout = new Ext.Panel({
    title: 'Employee Salary by Month',
    layout: 'border',
    layoutConfig: {
        columns: 1
    },
    width: 600,
    height: 600,
    items: [chart, grid]
});
new Ext.Viewport({
    layout: 'fit',
    items: [layout]
});
//layout.render(Ext.getBody());

Do you have this code online anywhere so that I can debug?

Thanks

**supercharge2** · 9 Jun 2009 6:51 AM

You can use one of your own examples. I took from your example page and put a quick test page together. I appreciate you looking into this.

Code:

<html>
<head><title>
    Test Page
</title>
<link rel="stylesheet" type="text/css" href="ext-3.0-rc2/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0-rc2/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext-3.0-rc2/ext-all.js">
</script>
<link href="css/superboxselect.css" rel="stylesheet" type="text/css" />
<script src="jscripts/SuperBoxSelect.js" type="text/javascript">
</script>
<script type="text/javascript">
    Ext.onReady(function() {
        var countryData = [['AU', 'Australia', 'x-flag-au', 'font-style:italic'], ['AT', 'Austria', 'x-flag-at', ''], ['CA', 'Canada', 'x-flag-ca', ''], ['FR', 'France', 'x-flag-fr', ''], ['IT', 'Italy', 'x-flag-it', ''], ['JP', 'Japan', 'x-flag-jp', ''], ['NZ', 'New Zealand', 'x-flag-nz', ''], ['US', 'USA', 'x-flag-us', '']];
        var countryStore = new Ext.data.SimpleStore({
            fields: ['code', 'name', 'cls', 'style'],
            data: countryData,
            sortInfo: {
                field: 'name',
                direction: 'ASC'
            }
        });
        new Ext.Viewport({
            layout: 'border',
            items: [
            new Ext.TabPanel({
                region: 'center',
                id: 'MainTab',
                activeTab: 0,
                enableTabScroll: true,
                animScroll: true,
                layoutOnTabChange: true,
                items: [
                {
                    title: 'Home',                    
                    id: 'tab-home',
                    items: [{
                        allowBlank: false,
                        id: 'selector3',
                        xtype: 'superboxselect',
                        fieldLabel: 'Countries',
                        resizable: true,
                        name: 'countries',
                        store: countryStore,
                        mode: 'local',
                        displayField: 'name',
                        valueField: 'code',
                        stackItems: true
                    }]
                }]
            })
            ]
        });
    });
</script>
</head>
<body>
</body>
</html>

**supercharge2** · 9 Jun 2009 7:38 AM

Bashev posted a workaround for a similar extenstion that solved the issue:

Code:

Ext.override(Ext.ux.form.SuperBoxSelect, {
beforeBlur: Ext.emptyFn
})

[3.x] Ext.ux.form.SuperBoxSelect

Thread Tools

Search Thread

Display

Contents disapearing on blur

Contents disapearing on blur

Quick Example

Quick Example

Example

Example

Workaround

Workaround