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

[danh2000]

Hi danh,

Excellent support!! thanks for all.

One problem.

I´m migrating from 3.0.3 to 3.1.0. When I updated the latest code of your component over this code

Galdaka,

It's been a long long time since I changed that code - and I've tested in IE8 (at least with basic settings) without any problems.

Are you using compatability mode for some reason, and what doctype do you use - are you in Quirks or Strict mode?

Thanks,

Dan

[lanhun]

@danh2000 Thank you very much! Next time I will give an example.

[galdaka]

Galdaka,

It's been a long long time since I changed that code - and I've tested in IE8 (at least with basic settings) without any problems.

Are you using compatability mode for some reason, and what doctype do you use - are you in Quirks or Strict mode?

Thanks,

Dan

IE8 problem (Version 8.0.6001.18702). No compatibilty mode.

[danh2000]

New version attached to the first post here.

UPDATE 29/12/2009

Fixed IE8 Quirks Mode issue when transforming a HTML Select.
Fixed typo

[lanhun]

@danh2000

when component is destroyed.
error:
this.dom is undefined
error info:
onDestroy() -> killItems() ->resetStore()


sorry,i can not create the example now.

[danh2000]

@danh2000

when component is destroyed.
error:
this.dom is undefined
error info:
onDestroy() -> killItems() ->resetStore()

sorry,i can not create the example now.

I have 2 test cases for this and both are working. I'll need more information and a test case if you are having problems.

Dan

[greco]

Great Job!

I have a question.

I use the SuperBoxSelect.getValueEx() -> var list = [{id:1,name:'x'}, {id:2,name:'y'}]

and then use the SuperBoxSelect.setValueEx(list).

In firebug throws an Exception
"I.style is undefined"
ext-all-debug.js 3920 "out = (v = el.style[prop]) ? v :\n"

This my Code:

    this.userFields = ['id', 'name'];
	this.userRecord = Ext.data.Record.create(this.userFields);
        this.userStore = new Ext.data.JsonStore({
        fields: this.userFields
    });
    this.userList = new Ext.ux.form.SuperBoxSelect({
        fieldLabel: 'Users',
        resizable: true,
        width: 170,
        store: this.userStore,
        mode: 'local',
        displayField: 'name',
        valueField: 'id',
        forceSelection : true
     });

     var users = resp.users;
     for(var i=0, u; u = users[i++];) {
	this.userStore.add(new this.userRecord(u));
     }

//##################################
   
    var list = this.userList.getValueEx();

//##################################

    this.userList.setValueEx(list);

[danh2000]

...
In firebug throws an Exception
"I.style is undefined"
ext-all-debug.js 3920 "out = (v = el.style[prop]) ? v :\n"
...

I've just tried this scenario and it works without throwing an exception... what version of Ext are you using?

Do you have an online version so that I can debug? or it may help just to see the data you are using in the store.

[frederickd]

This extension is fantastic! It is just what I wanted to eliminate some troublesome checkboxes and be more Web 2.0-ish. Thank you!

I am very close to having my implementation done. My problem is my lack of knowledge of javascript. I've updated my project to ExtJs 3.1.0. The SuperBoxSelect is working perfectly showing my local list of items. What is not happening is the loading of the database field of all the selections. I am only sending to the database the last selection that was made.

Here is what I've got for code snippets. First the definition of the SuperBoxSelect:

    var servicesCombo = new Ext.ux.form.SuperBoxSelect({
        id: 'services1',
        fieldLabel: 'Service(s) Rendered',
        emptyText: 'Select service(s) rendered...',
        resizable: true,
        minChars: 2,
        store:    [
                'AirCondEvap', 'DieselFuelSys', 'GasFuelSys', 'Battery', 'BrakeFlush', 'Driveline',
                'Transmission', 'CoolingSys', 'PowerSteer'
                ],
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        name: 'data[Repairorder][services]',
        hiddenName: 'data[Repairorder][services]',
        selectOnFocus:true
    });

Pretty simple stuff. The hiddenName has been how I have loaded other combo boxes. The format of the name is for sending back to CakePHP the database field. [Repairorder] is the model name (database table) and [services] is the field. It is defined as a VARCHAR(150) in a MySQL MyISAM database.

Here is what I have for a handler on the save button:

        buttons: [{
                text: 'Save',                   // text for submit button
                type: 'submit',               // type for button
                handler: function() {     // when you click the button...
                    alert(Ext.getCmp('services1').getValue());
                    add_form.form.submit({
                        url: 'http://'+host+'/repairorders/add_save',
                        waitMsg:'Saving Data...',
                        success: function() {

and so on...

The code in bold was just a debug aid to pop an alert box. The alert box always has all the values that were selected.

Would someone be so kind as to help me put the contents in my database field please? I know this is a newbie type question but I have experimented around and cannot discern the answer myself.

Thank you in advance!

[frederickd]

Did some more scratching around and here is the POST data that is going back to the server:

data[Repairorder][advisor_id]1
data[Repairorder][dealer_id]1
data[Repairorder][distributor_id]1
data[Repairorder][lof]Premium
data[Repairorder][make]Toyota
data[Repairorder][model]4-Runner
data[Repairorder][number]RO20100107b
data[Repairorder][odometer]13456
data[Repairorder][odometer_type]Miles
data[Repairorder][servicedate]2010-01-07
data[Repairorder][services]
data[Repairorder][services]AirCondEvap
data[Repairorder][services]Battery
data[Repairorder][services]BrakeFlush
data[Repairorder][vin]5TDZT34A05S250524
data[Repairorder][year]2008

What is interesting is that all three choices show up, but they are not delimited by commas as in the alert box. I can see now why only the last selection is loaded to the database. Does this help? How do I keep the delimited values?