PDA

View Full Version : ext.View and ext.JSONView



jon.whitcraft
5 Jan 2007, 10:23 AM
i am using the JSONView component to make an image organizer, but i wanted to be able to select the thumbnails much like you can in windows where you can drag and you get a box that will select multiple when the box is over them.

So I desided to write one. It's still really rough and i dont have any events in it yet but it you click, hold down, and move your mouse it will draw the box.

http://dev2.indycar.com/online/jon/selector/selector.html

Let me know what you think. Any and all ideas are welcome.

Thanks

Jon

TommyMaintz
5 Jan 2007, 12:16 PM
wow, looks really great :)

jack.slocum
6 Jan 2007, 6:04 AM
That does look nice. Have you figured out how you will decide what you are over?

jon.whitcraft
6 Jan 2007, 10:55 AM
No I have not yet. I'm going to work on that a bit today. I am thinking that when this is created it will have to know which view to use so a config option is going to have to be the view object or this is going to have to be put into the view somehow. I haven't looked into the view code too much but i'm sure there is a way i can do that.

I do have it so that if you hold down ctrl or shift you get an icon so that you can add to your selection or select a different range again kinda of like windows. I need to put in the mac support but i'll get to that soon.

bahar
15 May 2007, 7:08 AM
very cool. have you combined it with the view yet?

Carina
21 May 2007, 6:46 AM
Wow, would be really nice to get this working. Are there any updates on this?
Unfortunately, I haven't found any other threads on this topic.

I would love to implement this myself but I have absolutely no idea how to figure out which items to select 8-|

bahar
21 May 2007, 6:56 AM
I think one way to find out which items are selected is by using getNodes() method of the view.
getNodes() returns a list of template nodes, we can check these nodes one by one and see if they are under the rectangle and select them.
I don't know if this is really applicable or the best way to do this but I think it may work.

Carina
23 May 2007, 3:01 AM
I tried to update this example to Ext but I'm having troubles with the event handling: I constantly get "too much recursion" errors for the mousedown event.



Firebug:
too much recursion
[Break on this error] var args = Array.prototype.slice.call(arguments, 0);
ext-all-debug.js (line 1418)

too much recursion
[Break on this error] if(this.browserEvent.type == 'mousedown')
ext-all-debug.js (line 1858)

too much recursion
[Break on this error] if(l.fireFn.apply(l.scope, arguments) === false){
ext-all-debug.js (line 1421)


And the call stack looks like this:

fire < stopPropagation < h < fire < stopPropagation < h < fire < stopPropagation < h ... and so on.


I searched on the forum and the only thing I found out is that this could be caused by an event which causes itself to be fired again (well, obviously). But I have no idea why this happens. Tried a couple of things (using "addListener" or "on" with {stopPropagation: true, preventDefault: true} instead of "mon" and not explicitly using e.stopPropagation) but without success.


Didn't make any changes to the code except for renaming Yahoo.Ext and getEl.
I'm using ext 1.0.1.

ludoo
24 May 2007, 6:42 AM
And what about the "Selectables (http://interface.eyecon.ro/docs/select)" from interface (based on jquery) ?

Animal
24 May 2007, 12:22 PM
So you're wanting to select Element inside an area defined by a mousedown/drag?

First, you should constrain the drag to within the container that contains selectable items.

If you have the coordinates, you can create a YAHOO.util.Dom.Region (See docs).

Then loop through the selectable items, get their Region, and see if the select Region contains the selectable item's Region using the Region.contains() method. If the selectable item is contained in that region, add it to the Array of selected items, add a "selected" class to it to highlight it.

Well, that's the idea.;)

ludoo
24 May 2007, 11:27 PM
Could'nt be faster if we use a specific class "selected" on highlighted items (that's the deal of this library "interface/selectables").
To retrieve those ext items, a simple loop using css selectors and/or a loop on grid/view ext items.
I think all these regions computations will be slow, especially on big selection (what about "select all") !

phibix
29 May 2007, 6:15 PM
Is it just my system (FF 1.5.0.8) or what? When you drag from a point and move down and to the right the box resizes smoothly, but if you drag from a point and move up and to the left it resizes much more slowly.

Good start. I'd love to see a generic bounding box selection model!

B

aconran
15 Jun 2007, 9:44 AM
I'd love to see a final version of this integrated into Ext.

mxracer
17 Jul 2007, 8:59 AM
i am using the JSONView component to make an image organizer, but i wanted to be able to select the thumbnails much like you can in windows where you can drag and you get a box that will select multiple when the box is over them.

So I desided to write one. It's still really rough and i dont have any events in it yet but it you click, hold down, and move your mouse it will draw the box.

http://dev2.indycar.com/online/jon/selector/selector.html

Let me know what you think. Any and all ideas are welcome.

Thanks

Jon


Jon, did you end up finishing this? I am very interested in seeing the end result if you did.

Thanks.

gacowarlock
18 Feb 2009, 11:40 PM
Is there still any progress or is there a final version?

I think many people are interested in this.
Therefore, sharing the code with the community would be really nice.

Animal
19 Feb 2009, 12:24 AM
http://extjs.com/deploy/dev/examples/organizer/organizer.html

gacowarlock
19 Feb 2009, 1:37 AM
Hey Animal,

I'm aware of the example, but the select box you create by dragging the mouse only works inside the DataView panel. I would like to be able to create the selection rectangle everywhere on the page and not only in the DataView panel.

Best,
gacowarlock

Animal
19 Feb 2009, 1:53 AM
To programatically select what?

gacowarlock
19 Feb 2009, 1:58 AM
To select elements from the DataView.

It was just an idea. But after thinking about it, I came to the conclusion that this doesn't make sense because then you have potential conflicts with other elements (e.g. tree nodes).