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

**senacle** · 6 Feb 2011 1:22 PM

Hello !

I've red some posts in this thread, i've tried to do what is said somewhere, but i can't do what i want.

So, i've a SuperBoxSelect inside a form.

I want to load data into the form.
When there's multiple datas to put in the SuperBoxSelect, i don't know how to do it.

The SuperBoxSelect :

Code:

            allowAddNewData: true,
            allowBlank:false,
            displayField: 'nom_genre',
            fieldLabel: 'Genre(s) ',
            hiddenName: 'genre[]',
            id:'idjs_genre',
            listeners: {
                newitem: function(bs,v,f) {
                    v = v +'';
                    v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
                    var newObj = {
                        id_genre: v,
                        nom_genre: v
                    };
                    bs.addNewItem(newObj);
                }
            },
            listWidth: 300,
            minChars: 3,
            name: 'genre[]',
            store: store_genre,
            triggerAction: 'all',
            valueField: 'id_genre',
            width: 300,
            xtype:'superboxselect'

The reader of the form :

Code:

        reader: new Ext.data.JsonReader({
            root : 'livre',
            fields: ['isbn', 'titre', 'annee', 'numero', 'nb_page', 'prix', 'id_case', 'editeur', 'collection', 'genre', 'auteur']
        }),

The json data coming from the server :

Code:

{"success":true,
"livre":[{
    "isbn":"INC1230238948371",
    "titre":"Th\u00e9\u00e2tre\/roman (t1)",
    "annee":"1973",
     "numero":"41",
    "nb_page":"410",
    "prix":"0.00",
    "id_case":"29",
    "editeur":"6",
    "collection":"13",
    "genre":"10, 12",
    "auteur":"40"}
]}

As you can see, there's two values for the "genre".

I think i must have "genre[]" in the json and in the reader, but if so, i've the following error with the reader :

Code:

syntax error
return obj.genre[]

My question : how to load multiple datas in a SuperBoxSelect ?

**senacle** · 19 Mar 2011 12:53 PM

Originally Posted by senacle

Hello !

I've red some posts in this thread, i've tried to do what is said somewhere, but i can't do what i want.

So, i've a SuperBoxSelect inside a form.

I want to load data into the form.
When there's multiple datas to put in the SuperBoxSelect, i don't know how to do it.

The SuperBoxSelect :

Code:

            allowAddNewData: true,
            allowBlank:false,
            displayField: 'nom_genre',
            fieldLabel: 'Genre(s) ',
            hiddenName: 'genre[]',
            id:'idjs_genre',
            listeners: {
                newitem: function(bs,v,f) {
                    v = v +'';
                    v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
                    var newObj = {
                        id_genre: v,
                        nom_genre: v
                    };
                    bs.addNewItem(newObj);
                }
            },
            listWidth: 300,
            minChars: 3,
            name: 'genre[]',
            store: store_genre,
            triggerAction: 'all',
            valueField: 'id_genre',
            width: 300,
            xtype:'superboxselect'

The reader of the form :

Code:

        reader: new Ext.data.JsonReader({
            root : 'livre',
            fields: ['isbn', 'titre', 'annee', 'numero', 'nb_page', 'prix', 'id_case', 'editeur', 'collection', 'genre', 'auteur']
        }),

The json data coming from the server :

Code:

{"success":true,
"livre":[{
    "isbn":"INC1230238948371",
    "titre":"Th\u00e9\u00e2tre\/roman (t1)",
    "annee":"1973",
     "numero":"41",
    "nb_page":"410",
    "prix":"0.00",
    "id_case":"29",
    "editeur":"6",
    "collection":"13",
    "genre":"10, 12",
    "auteur":"40"}
]}

As you can see, there's two values for the "genre".

I think i must have "genre[]" in the json and in the reader, but if so, i've the following error with the reader :

Code:

syntax error
return obj.genre[]

My question : how to load multiple datas in a SuperBoxSelect ?

I answer to myself :

The SuperBoxSelect (no change) :

Code:

            allowAddNewData: true,
            allowBlank:false,
            displayField: 'nom_genre',
            fieldLabel: 'Genre(s) ',
            hiddenName: 'genre[]',
            id:'idjs_genre',
            listeners: {
                newitem: function(bs,v,f) {
                    v = v +'';
                    v = v.slice(0,1).toUpperCase() + v.slice(1).toLowerCase();
                    var newObj = {
                        id_genre: v,
                        nom_genre: v
                    };
                    bs.addNewItem(newObj);
                }
            },
            listWidth: 300,
            minChars: 3,
            store: store_genre,
            triggerAction: 'all',
            valueField: 'id_genre',
            width: 300,
            xtype:'superboxselect'

The reader of the form (change):

Code:

        reader: new Ext.data.JsonReader({
            root : 'livre',
            fields: ['isbn', 'titre', 'annee', 'numero', 'nb_page', 'prix', 'id_case', 'editeur', 'collection', {name: 'genre[]', mapping: 'genre'}, {name: 'auteur[]', mapping: 'auteur'}]
        }),

The json data coming from the server (change):

Code:

{"success":true,
"livre":[{
    "isbn":"INC1230238948371",
    "titre":"Th\u00e9\u00e2tre\/roman (t1)",
    "annee":"1973",
     "numero":"41",
    "nb_page":"410",
    "prix":"0.00",
    "id_case":"29",
    "editeur":"6",
    "collection":"13",
    "genre":"10,12",
    "auteur":"40"}
]}

For the json, be carefull :
in the first code, there is a space after the coma ("genre":"10, 12"). SuperBoxSelect doesn't recognize the space.
in the second code, there is no space after the coma ("genre":"10,12")

**markmansour** · 9 Apr 2011 11:16 PM

Thank you so much. I really appreciate that you took the time to write this up - you saved me many hours of frustration.

Originally Posted by boggle

I've been using this great extension for a while successfully in an EditorGrid.

Having recently upgraded to 3.3 I found that SuperBoxselect would set the record field value to "".
After a good few hours tracing the problem it looks like it is because the grid editor tries to call this.field.assertValue() on edit complete if this exists. Since superboxSelect inherits form the combo (which has this method) this gets called.
The method is unique to combo (not needed on superbox).

my fix:

Code:

Ext.override(Ext.ux.form.SuperBoxSelect, {
   assertValue:null
});

(I'd suggest any future release of this include the above property setting)

**istetska** · 14 Apr 2011 8:48 AM

devtig
were you able to implement Superboxselect with combo height for IE 7?
for some reason you example posted on 30 Nov 2010 7:55 AM only works for FF. do you have any updates?
thanks!

**devtig** · 14 Apr 2011 10:03 PM

I haven't tried IE7 at the time and I haven't since. I did work in FF, IE8 and IE6. 1px too high in Chrome. I don't have new code for you. You're welcome to adjust and post a better version here on the forum. Make sure you test it in the other browsers too before you post here. thanks.

**gacowarlock** · 16 Apr 2011 9:43 AM

I have a problem SuperBoxSelect and pre-selected entries:

When I set to local and manually load my store, then the available entries get displayed.
When I set to remote, then I get a not ending number of server requests but get the pre-selected entries correctly. In this mode, it's not possible to see the list of available entries...
What am I doing wrong?

Here's my code:

Code:

PN.form.SubsidiaryComboBox = Ext.extend(Ext.ux.form.SuperBoxSelect, {

    displayField: 'shortname',
    valueField: 'id',
    mode: 'remote',
    triggerAction: 'all',
    editable: false,
    queryValuesDelimiter: ',',

    constructor: function(config) {
        this.store = new PN.data.JsonStore({
            modelName: 'subsidiary'
        });
        
        // Disable autosave
        this.store.autoSave = false;
        
        // Preload the store
        this.store.load();
        
        PN.form.SubsidiaryComboBox.superclass.constructor.call(this, config);           
    },

My SuperBoxSelect.js is original and not modified.

Please see the attached screenshot for details.

Hoping for help...

gacowarlock

**tvelykyy** · 29 Apr 2011 5:55 AM

SuperBoxSelect filled with initial values receives focus after page loads. I want to get rid of this focus. Have that can be done.

P.S. I'm quite newby, so don't judge me strong. I'm just learning.

**JorisA** · 4 May 2011 4:14 AM

Oeeeeeweee, any plans on updating it for Ext4? This is the awesomest input field ever!

**abraxxa** · 4 May 2011 6:27 AM

I was hoping that ExtJS 4 will include any form of multiselect input field but it doesn't

**revertTS** · 21 Jun 2011 1:05 PM

The @license in SuperBoxSelect.js lists it as TBA; is this still the case?

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

Thread Tools

Search Thread

Display

How to load data in a SuperBoxSelect within a form ?

How to load data in a SuperBoxSelect within a form ?

SuperBoxSelect filled with initial values receives focus after page loads

SuperBoxSelect filled with initial values receives focus after page loads