PDA

View Full Version : [3.x] Ext.ux.form.SuperBoxSelect



Pages : 1 [2]

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 :



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 :



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 :

{"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 :


syntax error
return obj.genre[]


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

senacle
19 Mar 2011, 12:53 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 :



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 :



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 :

{"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 :


syntax error
return obj.genre[]
My question : how to load multiple datas in a SuperBoxSelect ?



I answer to myself :

The SuperBoxSelect (no change) :



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):



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):

{"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.



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:

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 (http://www.sencha.com/forum/member.php?107236-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:



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?

leorossi
21 Jun 2011, 7:15 PM
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?


I have the same exact issue.
This is my code:


this.superBoxApplicant = new Ext.ux.form.SuperBoxSelect({
name: 'applicant',
width: 300,
fieldLabel: this.lang('superBoxApplicant', 'fieldLabel'),
emptyText: this.lang('superBoxApplicant', 'emptyText'),
listEmptyText: this.conf.wrapErrorStart + this.lang('superBoxApplicant', 'empty') + this.conf.wrapErrorEnd,
resizable: true,
valueField: 'id',
displayField: 'party_name',
store: this.partyStore,
triggerAction:'all',
mode:'remote',
anchor:'100%',
queryDelay: 0,
minChars: 2

});


the JSON returned by the store is something like:


{"success":true,"message":"List loaded correctly","total":25,"data":[{"id":"12","party_name":"Abbott"},{"id":"11","party_name":"Bayer"}...]


I noticed that if I change the displayField to whatever (like 'asd' or something not present in the json response) the list is actually built and I can count 25 entries, of course without any label. When I change back to 'party_name' or even 'id', it acts like the post above..

any suggestion? I already looked at the code of the technomedia.co.uk examples and I think the issue is on the JSON response...

Thanks for the help!

LR

leorossi
22 Jun 2011, 10:21 PM
SOLVED!
Removing

remoteSort: true

flag from the store solves the problem with 'remote' store and infinite requests!

kleins
2 Jul 2011, 3:07 AM
Just to let you know I had a shot at an implementation of BoxSelect for Ext 4: http://www.sencha.com/forum/showthread.php?139170-BoxSelect-for-Ext-4-another-implementation&p=621549#post621549

ian.young
11 Jul 2011, 10:12 AM
I would really like the license to be clarified. Because without a license, it's effectively illegal to use the component anywhere.

ramana_l_v
18 Jul 2011, 1:15 PM
I am also facing the same issue, is your problem solved ? what did you do to fix this ?

Thanks



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:



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

leorossi
18 Jul 2011, 2:11 PM
I solved it removing the remoteSort property (that was set to true)

kora.kanchan
2 Aug 2011, 10:36 AM
I fixed the height of superboxselect but when i select multiple items, trigger and clear buttom moving up.

27263

Please help me

Thanks in advance.

joxzaren
15 Aug 2011, 8:08 AM
Hi,

I'm using SuperBoxSelect and finding it to be a great widget. However, using the Enter Key to select an item in the drop down list doesn't work on IE8. Has anybody else haved this problem?

Thanks,
Per

pops
9 Sep 2011, 5:36 AM
Hi all,

I'm looking for a solution to validate the items on my combobox when I click anywhere on my web page (when field lose focus).
Has anyone any idea?

I tried


addNewDataOnBlur:true

but without success. It's seems to work only with tab key.

Thanks,
Pops.

Grolubao
23 Sep 2011, 4:44 AM
hi all!
dan, thanx for extension.
I'm using SuperBoxCombo on ExtJs 3.2.1 and I had a problem. After loading form's values the superbox's trigger wan't work. this is because of onEnable function which calls this.initButtonEvents(), and this functions attaches one more listener to 'click' event, so the drop-down list expands and collapses immediately. I solved this by adding calling this.removeButtonEvents() function in the beginning of the initButtonEvents() function.


initButtonEvents : function() {
this.removeButtonEvents();
this.buttonClear.addClassOnOver('x-superboxselect-btn-over').on('click', function(e) {
e.stopEvent();
if (this.disabled) {
return;
}
this.clearValue();
this.el.focus();
}, this);

this.buttonExpand.addClassOnOver('x-superboxselect-btn-over').on('click', function(e) {
e.stopEvent();
if (this.disabled) {
return;
}
if (this.isExpanded()) {
this.multiSelectMode = false;
} else if (this.pinList) {
this.multiSelectMode = true;
}
this.onTriggerClick();
}, this);
},

If you have better solutions - welcome!


Thank you very much for this fix!

ucoxk
5 Oct 2011, 9:30 PM
I downloaded the extension from the link provided in first page. it did not contain assertValue function.
Currently by using this control as grid editor it shows values when we try to edit the cell and show values but as i move out the cell it clears cell contents
I actually want to use this control in grid editor. Can you please post ur whole code
I shall be thankful to you

senacle
30 Dec 2011, 1:48 AM
I've upgraded my app from Extjs3.3.0 to Extjs3.4.0 and was facing the bug described behind with SuperBoxSelect.

My SuperBoxSelect is in a form and the form is in a panel.
The panel is first rendered hidden.
When i choose some data in a combo, the panel is shown and the form is reset.
When resetting the form, the SuperBoxSelect is reset and is calling
clear: this.manageNameAttribute, (ligne 211 of SuperBoxSelect.js)


manageNameAttribute : function(){
if(this.items.getCount() === 0 && this.forceFormValue){
this.el.dom.setAttribute('name', this.hiddenName || this.name);
}else{
this.el.dom.removeAttribute('name');
}
},

(ligne 679 of SuperBoxSelect.js)

I've the following error in firebug : this.el.dom is undefined.

So, i commented out the line "clear: this.manageNameAttribute,", and it's working fine.

I wonder also what is the purpose of "manageNameAttribute".
If using a SuperBoxSelect in a form, it's to post the values, isn't it ?
So, set the "name" and "hiddenname" properties of your SuperBoxSelect, comment the "clear: this.manageNameAttribute," line and it's working.




I made new tests wihtout commenting line, and the bug disappeared !

ZooKeeper
12 Jan 2012, 3:44 AM
One question.
Isn't these lines useless?



// start here!
Ext.ux.form.SuperBoxSelectItem = function(config){
Ext.apply(this,config);
Ext.ux.form.SuperBoxSelectItem.superclass.constructor.call(this);
};
// end
/*
* @private
*/
Ext.ux.form.SuperBoxSelectItem = Ext.extend(Ext.ux.form.SuperBoxSelectItem,Ext.Component, {
...


You reassign the Ext.ux.form.SuperBoxSelectItem right after it

deepthi_r
31 Jan 2012, 7:43 AM
Hello,
Can anyone help me find the latest version for SuperBoxSelect or the one that supports extjs 3.4 ,

I tried the one in the first page of this thread but have issues related to :

1) Content not being displayed if we come back to the SuperBoxSelect Drop down after we do a bulk delete on the selected items and then when the control moves to another popup/window.
2) Issues with remote store (extjs js error when we delete any item)

Thank you
Deepthi

ramana_l_v
31 Jan 2012, 8:30 AM
I am using the attached code for 3.4 version and it works perfectly fine, I might have done few minor changes.

mjhaston
31 Jan 2012, 9:10 AM
Same for me on 3.4! Do you remember your changes?

ramana_l_v
31 Jan 2012, 9:28 AM
Can you try with the attached code, because I don't remember the changes but I did very minor changes.
Can you post what exact error you are facing or the place where it is breaking in the SuperBoxSelect.

Thanks,
Ramana

spydercavern
7 Mar 2012, 9:23 PM
Hi,

I'm using SuperBoxSelect and finding it to be a great widget. However, using the Enter Key to select an item in the drop down list doesn't work on IE8. Has anybody else haved this problem?

Per
I have the same problem in IE8. has anyone found the work around for this?
I am using extjs 3.4
Thanks

ash11tw
3 Apr 2012, 10:41 AM
Just in case somebody gets the same problem as I got.

My Problem:
I have the superboxselect element inside a window. When window shows first time, everything is fine. However, if window hides and shows at the second time, the list of superboxselect is missing.

Solution:

Actually, the list is not missing. It is just behind the window element. The zindex of window element will be changed based on the number of windows (including msg box) to make sure the showed one is always on top of windows. However, the zindex of the list from superselectbox is not changed after first time rendering.

To fix this problem just simple add


expand : function(){
if (this.isExpanded() || !this.hasFocus) {
return;
}
this.list.setZIndex(this.getZIndex());
this.list.alignTo(this.outerWrapEl, this.listAlign).show();
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
Ext.getDoc().on({
mousewheel: this.collapseIf,
mousedown: this.collapseIf,
scope: this
});
this.fireEvent('expand', this);
},



Hope this help anyone.

armandoxxx
19 Apr 2012, 9:44 AM
hey guys

I need toogle ( and onToogle event) on items in a component ... did any of you ever need this and could share code ?

by toogle I mean ... I want to be notified when Item is selected and deselected ...

and blur event is not the correct one ...

kind regards

Armando

Grolubao
23 Apr 2012, 7:31 AM
Any progress on the licensing?

qiankun
27 Apr 2012, 7:43 AM
en,I like this, Thanks

armandoxxx
23 May 2012, 12:16 AM
Hey

I need a bit of a help with focus on superboxSelect element.

I have a form with fields and one field triggers loading of elements in sbs component and then sbs steals focus. Is there a way to force it not to steal focus ?

Regards

Armando

Antjac
14 Jun 2012, 11:18 PM
I downloaded the extension from the link provided in first page. it did not contain assertValue function.
Currently by using this control as grid editor it shows values when we try to edit the cell and show values but as i move out the cell it clears cell contents
I actually want to use this control in grid editor. Can you please post ur whole code
I shall be thankful to you
Just add :

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

Grolubao
10 Oct 2012, 4:55 AM
Thanks a lot for this fix! Appreciated!

One a side note, this worked in SuperboxSelect version 2, but in 3 it needs your fix.


I shamefully contribute way too little given the help I get from these extensions and forum so here's a little payback.

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:

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

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

Mr.Solomon
17 Mar 2013, 10:24 PM
thanks very much ,I followed your post,and I solved this problem :D:)

Mr.Solomon
17 Mar 2013, 10:26 PM
thanks, I solved this problem!:))

Just in case somebody gets the same problem as I got.

My Problem:
I have the superboxselect element inside a window. When window shows first time, everything is fine. However, if window hides and shows at the second time, the list of superboxselect is missing.

Solution:

Actually, the list is not missing. It is just behind the window element. The zindex of window element will be changed based on the number of windows (including msg box) to make sure the showed one is always on top of windows. However, the zindex of the list from superselectbox is not changed after first time rendering.

To fix this problem just simple add


expand : function(){
if (this.isExpanded() || !this.hasFocus) {
return;
}
this.list.setZIndex(this.getZIndex());
this.list.alignTo(this.outerWrapEl, this.listAlign).show();
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
Ext.getDoc().on({
mousewheel: this.collapseIf,
mousedown: this.collapseIf,
scope: this
});
this.fireEvent('expand', this);
},



Hope this help anyone.

Joyfulbob
25 Mar 2013, 6:27 AM
Thanks!

We have an app with 2 multi-select CBs. The first one works, but then when you use the 2nd one, it's list is hidden behind the window the same as your situation.

Any fix for this situation?

Thanks in advance.

leduc
28 Apr 2013, 11:40 PM
Hello All,

I have an issue with renderer on IE8 as soon as the SP1 is installed on Win7 no trouble with IE8 if the OS SP1 is not installed.
In fact, the height of combo box is not available.
On first renderer, it's smaller, and after when the list growing the height doesn't change, so we can not read the selected elements.
Have you some trick on IE8 parameters or correction on superBox to avoid this?

Thanks you for your help.

Joyfulbob
8 May 2013, 5:06 AM
Thanks for the solution but it doesn't work for us. We're on FF 20.0.1.

If we have 2 super CBs the second one behaves like this with the drop-down list 'behind' the input box.


expand : function(){
if (this.isExpanded() || !this.hasFocus) {
return;
}
this.list.setZIndex(this.getZIndex());//RK..6.19.2012 Fix for successive clicks rendering the list behind the window
this.list.alignTo(this.outerWrapEl, this.listAlign).show();
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
Ext.getDoc().on({
mousewheel: this.collapseIf,
mousedown: this.collapseIf,
scope: this
});
this.fireEvent('expand', this);
}

Any ideas?