PDA

View Full Version : [beta] Ext.ux.ItemSelector (part of Ext.ux.Multiselect v1.2)



tjstuart
22 Aug 2007, 7:33 PM
Beta now available. ItemSelector is dependent on Multiselect so the class is included in Multiselect v1.2. See here http://extjs.com/learn/Extension:Multiselect for links to demo, download etc etc.

Probably a few bugs and limitations.

Cheers

brian.moeskau
22 Aug 2007, 9:58 PM
Looks great TJ -- my only comment is about the bright red buttons. Not that bright red is inherently bad, just that to fit into a default Ext layout, another color might be easier for people who want a good default that won't need changing. I don't know, maybe... blue? :)

tjstuart
22 Aug 2007, 10:12 PM
Looks great TJ -- my only comment is about the bright red buttons. Not that bright red is inherently bad, just that to fit into a default Ext layout, another color might be easier for people who want a good default that won't need changing. I don't know, maybe... blue? :)

I agree the red does not fit with the Ext style.

If anyone can find (or create) some royalty free arrow icons I'd be happy to replace the red ones. I was feeling a bit lazy so I just googled for royalty free arrow icons and that was first thing I found that suited (size-wise). Graphics are not my thing ;)

Cheers

rednix
23 Aug 2007, 12:46 AM
Have a look at http://www.famfamfam.com/lab/icons/ ... maybe there are some icons that fit your need.

galdaka
23 Aug 2007, 1:42 AM
What about theses? ;)

tjstuart
23 Aug 2007, 3:30 PM
What about theses? ;)

Wow! They're great!. Thanks. Did you draw them? I'll add them. As Brian suggested, any chance of some blue ones that better fit the defualt Ext theme? Perhaps a bit larger, maybe 24x24? Either way, they are alot better than the red ones I used :D

Cheers

brian.moeskau
23 Aug 2007, 3:43 PM
Actually silver fits the themes perfectly since Ext buttons are silver. Nice Galdaka!

tjstuart
23 Aug 2007, 3:45 PM
Actually silver fits the themes perfectly since Ext buttons are silver. Nice Galdaka!

Good. We'll run with the silver ones then. Thanks again Galdaka!

jsakalos
23 Aug 2007, 3:46 PM
Looks good!

Cannot wait for a live demo.

Suggestions:


make button images configurable
make a "add item" above the left box configurable
Looks veeeeery promising. =D>

tjstuart
23 Aug 2007, 3:57 PM
Looks good!
Cannot wait for a live demo.


See here for links to demo http://extjs.com/learn/Extension:Multiselect




Suggestions:


make button images configurable
make a "add item" above the left box configurable
Looks veeeeery promising. =D>

Image buttons are already configurable and Galdaka has supplied me with some nicer ones than the red I used. I'll update shortly.

Add Item? Not sure what you mean.

One feature I plan on adding is a filter text field above the available list.

Cheers

jsakalos
23 Aug 2007, 4:44 PM
Blind me.... ;)

I was only looking at the right side which says "No demo". I found it now.

Add item? If you look at the image in this thread: [REQUEST] Double Select (http://extjs.com/forum/showthread.php?t=11164) you see extra input above the left list.

I use it in SQL builder where I have fields read from a table in the list and I can add calculated fields (SQL expressions) in free type form in that extra input.

Cheers,

J.C. Bize
23 Aug 2007, 4:44 PM
Just tried the demo, fantastic job... I love the drag and drop.

Here are a couple of features that I think most people would find useful:


"Move to Top" and "Move to Bottom" (in addition to the existing "Move Up" and "Move Down")
Enable/disable arrows buttons based on selection (or lack of it)
When an item is moved from the source panel to the destination panel, selection focus should move to the next item in that panel.
Keyboard navigation
Along with the above, only allow 1 item should probably be selectable at once (to make it very clear where the selection focus currently is)


Some of those ideas may not be worth implementing.... just some things to think about :)

Thanks for your time and efforts.

Cheers,
JC

JeffHowden
23 Aug 2007, 6:15 PM
Suggestions:


make button images configurable
make a "add item" above the left box configurable
Looks veeeeery promising. =D>

Instead of using images for the buttons as a whole, instead they should use icons and be Ext buttons.

skyey
23 Aug 2007, 6:21 PM
live demo?

Thanks

tjstuart
23 Aug 2007, 6:56 PM
live demo?

There's a link to the demo here http://extjs.com/learn/Extension:Multiselect

Bharani
23 Aug 2007, 10:48 PM
That is really cool! i was looking for something like this. Just one question though - will i be able to use a datastore and a reader combination instead of giving the values directly in the config?

tjstuart
24 Aug 2007, 4:36 PM
That is really cool! i was looking for something like this. Just one question though - will i be able to use a datastore and a reader combination instead of giving the values directly in the config?

Yes you can use stores etc. Use the 'fromStore' and 'toStore' config options in the constructor.

JeffHowden
24 Aug 2007, 6:45 PM
+1 to "move to top" and "move to bottom" buttons
+1 to an optional text input above the list on the left
-1 to forcing single-selection for keyboard nav, at least left/right arrows.

tjstuart
26 Aug 2007, 6:03 PM
Thanks for all the feedback/suggestions etc.

I have compiled a list of all requested enhancements received so far:-

- Make a "add item" above the left box configurable (Saki)

What about the underlying code value ie. the value ultimately submitted when using a form? Re-use the display text for the value?

- Move to Top" and "Move to Bottom" (in addition to the existing "Move Up" and "Move Down") (JC)

Expect in next version

- Enable/disable arrows buttons based on selection (or lack of it) (JC)

Possibly next version

- When an item is moved from the source panel to the destination panel, selection focus should move to the next item in that panel. (JC)

Possibly next version

- Keyboard navigation (JC)

Will be available once implemented in Ext.ux.Multiselect

Along with the above, only allow 1 item should probably be selectable at once (to make it very clear where the selection focus currently is) (JC)

Next version

- Instead of using images for the buttons as a whole, instead they should use icons and be Ext buttons. (Jeff Howden)

Probably via config eg. useButtons or something like that


Cheers

Animal
27 Aug 2007, 12:48 AM
Shouldn't we agree on a single definition of a DraggableView/DDView so that the Ext.ux package is self consistent?

I like what you've done with it - x-combo-selected is the correct "Ext" way to select an item and will keep the look and feel consistent. But we shouldn't have duplicated code.

One thing I noticed that was a "bug" in my Ext.ux.DDView, and still shows, is selection order.

If you click the bottom element, shift click the top element, and then drag them over, the order will reverse. Selection order becomes the actual element order.

I'm planning (public holiday here today) to change getSelectedItems to loop through the Store in its natural order, calling isSelected on each Record, and push it onto the Array if it is selected. That will keep the order the same.

J.C. Bize
27 Aug 2007, 9:00 AM
-1 to forcing single-selection for keyboard nav, at least left/right arrows.

Sorry for being unclear... I did not mean forcing single selection, even for keyboard navigation. I think we are all in agreement that multiple selection is a must for this control.

In order to implement keyboard navigation correctly however, the user needs to know where the selection focus lies within the control when looking at it. Currently, items can be highlighted simultaneously in both the source and destination lists:

1498

When looking at the control in this state, users would not know where the focus currently lies; they would be left guessing what would happen when hitting one of the arrow keys.

I proposing that only the list that currently has focus displays its items as highlighted. This would resolve at least *some* ambiguities with keyboard navigation.

Ideally a new, separate selection focus rectangle should be implemented for proper keyboard navigation, but I am not sure how much additional work that would require.

1499

Cheers,
JC

JeffHowden
27 Aug 2007, 9:40 AM
Sorry for being unclear... I did not mean forcing single selection, even for keyboard navigation. I think we are all in agreement that multiple selection is a must for this control.

In order to implement keyboard navigation correctly however, the user needs to know where the selection focus lies within the control when looking at it. Currently, items can be highlighted simultaneously in both the source and destination lists:

1498

When looking at the control in this state, users would not know where the focus currently lies; they would be left guessing what would happen when hitting one of the arrow keys.

Well, I can see how it might be ambiguous with ranking, though it could be understood that the ranking would get applied to any items that are selected. However, with moving items from one list to another I think it's much less ambiguous. After all, you can only move items from the left to the right with the right arrow button and vice versa. B)

galdaka
27 Aug 2007, 12:00 PM
My suggestions:

1) When an item or items are moved from the source panel to the destination panel, the dragged layer must be contain a graphical represention or number (and text) eof dragged items. (See image1 and image2). Posibilty to insert items in specific positions.

2) Instead of using images for the buttons as a whole, instead they should use icons and be Ext buttons. Enable/disable arrows buttons based on selection (or lack of it).

3) More buttons: "Add all" and "Remove all".

Good work! and thanks in advance,

tjstuart
27 Aug 2007, 3:53 PM
Shouldn't we agree on a single definition of a DraggableView/DDView so that the Ext.ux package is self consistent?

Yes I agree. Happy to use yours. Only drawback I see is dependencies for the end user ie. anyone that wants to use ItemSelector has to download DDView...on second thoughts maybe that's not a big deal as long as it is made clear.



One thing I noticed that was a "bug" in my Ext.ux.DDView, and still shows, is selection order.

If you click the bottom element, shift click the top element, and then drag them over, the order will reverse. Selection order becomes the actual element order.

I'm planning (public holiday here today) to change getSelectedItems to loop through the Store in its natural order, calling isSelected on each Record, and push it onto the Array if it is selected. That will keep the order the same.

Have this problem also so hopefully DDView deals with it eventually ;)

Animal
27 Aug 2007, 11:41 PM
I'll do that today.

jack.slocum
30 Aug 2007, 6:49 AM
One thing I noticed that was a "bug" in my Ext.ux.DDView, and still shows, is selection order.

If you click the bottom element, shift click the top element, and then drag them over, the order will reverse. Selection order becomes the actual element order.

Animal, I don't think that is a bug. I think that is the correct behavior. It allows for you to reorder, without having to reorder. What I mean is, the order in which you select the items is the order in which they are dropped.

Please don't remove that "feature" as I think it has quite a few valid use cases and many users might like it (like me ;)).

Animal
31 Aug 2007, 12:31 AM
OK, perhaps I can make it an option.

Most of the time, I want the visual order to be mantained. If I click on the bottom element first, and shift-click on the top, and then drag, I don't want my Components in the Menu in reverse order of what I see.

I can see the utility in being able to actually select in order and have the elements drop in that order.

I will update my DDView class today with an option to preserveSelectOrder with default false.

falcondot
17 Sep 2007, 3:33 AM
Hi ,

this MultiSelect n ItemSelector are not working on opera 9.01

this error is coming when I try to run your demo example url on opera 9.01 .....

falcondot
17 Sep 2007, 3:36 AM
In opera there is one more error coming ....

on line number 377 in your MultiSelect.js ...inside ItemSelector onRender function you have this code


var tr = table.createChild({tag: 'tr'});
tr = tr.child('tr'); // Line above auto creates <tbody> tag???
var td = Ext.get(tr.dom.appendChild(document.createElement('td')));


but the line "var tr = table.createChild({tag: 'tr'});" is not creating a tbody by default as it does in IE n Firefox so when we do "tr = tr.child('tr'); " . it gives an error ...cannot convert from undefined to null to an object .....

tjstuart
17 Sep 2007, 5:01 PM
@falcondot

Expect a new release this week which will address the issues you raised (together with some enhancements etc that others have requested)

@Animal

Will attempt to use your DDView. You anticipate much effort incorporating it into my ItemSelector as I havent yet really looked at DDView.

andrei.neculau
17 Sep 2007, 11:40 PM
@tjstuart
since you're preparing for a new release, you might want to consider the following for visual consistency:
When you mark it as invalid, you have that extra border bumping the whole element down 1px and right 1px (the red border).
What you should try to do is this:

1. make .ux-mselect { border: 0; overflow:auto; } in order to counter the border effect of the x-combo-list

2. add x-form-field to the element, inside onRender, and set width and height

this.el = ct.createChild();
this.el.dom.style.zoom = 1;
this.el.addClass(this.fieldCls);
this.el.setWidth(this.width);
this.el.setHeight(this.height);

3. set list height and width

this.list = new Ext.Layer({
shadow: false, cls: [cls, 'ux-mselect'].join(' '), constrain:false
}, div);

var lw = this.width - this.el.getFrameWidth('lr');
var lh = this.height - this.el.getFrameWidth('tb');

This way when you have the usual blue border for the field, and when you markInvalid the red border is not taking up more space.

andrei.neculau
18 Sep 2007, 1:26 AM
Another "improvement" is related to validation.
For my interests I added validation for blank, min length and max length (length = number of selections)

for instance... adding these properties


allowBlank:true,
minLength:0,
maxLegnth:Number.MAX_VALUE,
blankText:Ext.form.TextField.prototype.blankText,
minLengthText:'Minimum {0} item(s) required',
maxLengthText:'Maximum {0} item(s) allowed',then append to onViewClick and to setValue

this.validate();and then append these functions to the component

getRawValue: function(valueField){
var tmp = this.getValue(valueField);
if (tmp.length){
tmp = tmp.split(',');
}
else{
tmp = [];
}
return tmp;
},

setRawValue: function(values){
setValue(values);
},

validateValue : function(value){
if(value.length < 1){ // if it has no value
if(this.allowBlank){
this.clearInvalid();
return true;
}else{
this.markInvalid(this.blankText);
return false;
}
}
if(value.length < this.minLength){
this.markInvalid(String.format(this.minLengthText, this.minLength));
return false;
}
if(value.length > this.maxLength){
this.markInvalid(String.format(this.maxLengthText, this.maxLength));
return false;
}
return true;
}

The reason why I kept allowBlank is because the value of the field is actually textual..
Theoretically it should be without allowBlank, since allowBlank = false means minLength = 1

andrei.neculau
18 Sep 2007, 4:57 AM
Here I come with another thing --- implementing gridEditor with Multiselect

first of all, there's a need for a proper setSize function

setSize:function(w, h){
Ext.ux.Multiselect.superclass.setSize.call(this, w, h);
if(typeof w == 'object'){
h = w.height;
w = w.width;
}
if (!this.boxReady){
return this;
}
if (typeof w == 'number'){
this.el.setWidth(w);
var lw = w - this.el.getFrameWidth('lr');
this.list.setWidth(lw);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
}
if (typeof h == 'number'){
this.el.setHeight(h);
var lh = h - this.el.getFrameWidth('tb');
this.list.setHeight(lh);
this.innerList.setHeight(lh - this.list.getFrameWidth('tb'));
}
return this;
},and then there are some tweaks for the GridEditor. The main tweaking is that we should make the editor resizable. Why?.. well.. consider that field equals "1,4,5" but then the store is like 1->Home, 4->At the office, 5->Everywhere else.
Imagine the editor being connected to a column that is only 25px wide. You would see probably just Home, At the o, Everyw.. and nothing past that. So let's add the resizable property to the GridEditor


Ext.grid.GridEditor.prototype.onRender = Ext.grid.GridEditor.prototype.onRender.createSequence(function(ct, position){
if (this.resizable){
this.resizer = new Ext.Resizable(this.el,{
pinned:true, handles:'e'
});
this.resizer.on('resize', function(r, w, h){
this.setSize(w, h);
}, this);
}
this.setSize(this.width, this.height);
});

Ext.grid.GridEditor.prototype.onShow = Ext.grid.GridEditor.prototype.onShow.createSequence(function(){
if (this.resizable){
var sz = this.el.getSize();
this.field.setSize(sz.width, sz.height);
}
});

[LATER EDIT]
one quick fix needed for this.. because there is no field to acquire focus/blur, the grideditor will need to be taken away some other way. My solution was catching rowclick, so..

Ext.override(Ext.grid.EditorGrid, {
onClick : function(e){
this.stopEditing();
this.processEvent("click", e);
}
});

andrei.neculau
18 Sep 2007, 10:03 AM
I'm coming with another small improvement. Since the normal getName() for a field looks like


getName: function(){
return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
},inside the onRender function, you should append this



this.hiddenField = this.el.createChild(this.defaultAutoCreate);

this.hiddenName = this.name;This way, you can also do form.loadRecord(rec), otherwise the parsing of the fields will not find the Multiselect component.

Hope you find these tweaks/fixes useful :) I'm just posting them while I'm using them inside my application.

Cheers

PS: the GridEditor implementation.. well.. it works, but I think it would be much more natural to make it look liek ComboBox.. meaning.. a textfield with the multiselect as drop-down. It kind of makes more sense visually. Anyone? :D as I'm not plunging into that very soon.

tjstuart
18 Sep 2007, 10:44 PM
Great stuff andrei.neculau! Good man!

I've incorporated most of your suggestions. See thread detailing v2.0 of Ext.ux.Multiselect/ItemSelector ... http://extjs.com/forum/showthread.php?t=13202

Magicbob
20 Sep 2007, 6:48 AM
Hello

I don't know if it is because i don't use well your great extension but i had a little problem when using itemselector with datastores. when the toStore was not empty when loading and when i submit the form directly without doing anything the hidden field value was empty.
After a click to add a value it was ok and there was all values when submitting

I fixed my problem by adding



this.toStore.on('load', this.valueChanged, this);


Thanks

Magicbob

tjstuart
20 Sep 2007, 3:42 PM
Well spotted Magicbob! I'll add this fix to 2.1 which I'll release early next week. Also, please use this thread in future http://extjs.com/forum/showthread.php?t=13202

Cheers