Thumbnail view feature

[mihaip007]

Oh man oh man!!!! As impressed as I am this is difficult for me to write this because I think a LOT of work has gone into this framework...but!!!

I have searched High and Low for a SIMPLE feature and just cannot get my head around this! I am SO ready to start researching another framework, and it is such a pitty because this framework has SO MUCH to give...!

Okay - in simple explanation (I think), I am looking for a grid view similar to the FileSpots application but NOT for a file browser; rather I am trying to create a Control Panel which holds a number of thumbnails that I can sort and group by using headers just like on FileSpots to a smaller degree.

I gathered that one has to extend the GridView (or rather the GroupingGridView - which extends GridView) class in order to display the things in a thumbnail format rather than row format..! Am I on the right path???

Yes I HAVE researched and searched and asked for help, but after two and a half weeks of doing so I have hit such a dead end that it just not even funny! I cannot go on with my application development and I am BEGGING for some form of a hint...! Please please...!

I have tried to make use of the DataView class, but on FileSpot's thread "next" mentioned that he/she totally disregarded the dataview and went aliong with extending the GridView class ...! Now I am TOTALLY lost because I am TOTALLY a beginner in using this framework...!

If there is ANYBODY out there who would be willing to help with some advice or a hint that could send me on the right track I would very much appreciate it...!

I thank you in advance.....

Mihai

[Animal]

Oh man oh man!!!! As impressed as I am this is difficult for me to write this because I think a LOT of work has gone into this framework...but!!!

I have searched High and Low for a SIMPLE feature and just cannot get my head around this! I am SO ready to start researching another framework...
Mihai

If you think that there is something out there so simple, that you won't have to learn anything, then good luck!

Meanwhile, just look at

http://extjs.com/deploy/dev/examples/view/data-view.html

and

http://extjs.com/deploy/dev/examples/view/chooser.html

Both of which are in your Ext installation directory in examples/view

There are maybe 100 examples in the examples/* directories.

[mihaip007]

I am a PHP developer and I do NOT think something is Simple when it comes to development and especially in regards to Open Source...!

I appreciate your input and I HAVE already achieved my needs with the dataview as you have so kindly mentioned to look...! But I want to make use of a grid, and NOT a dataview as a dataview seems to be limited when it comes to "grouping"! Unless I have missed big time on something!

Also please note that I have been at this for more than just a day hahahaha! So yes I am sorry if I sound funny but I feel frustrated hahaha!

I do NOT think less of this framework and all the work put in this - don't take me wrong! And I HAVE been looking at a lot of YOUR advices throughout the posts. So I regard you VERY highly...!

Thanks!!!

[evant]

You want to create advanced functionality, but you said yourself you're a total beginner. While I understand this must be frustrating, you must also understand that what you're asking for isn't simple and will require a large amount of work for whoever completes it.

Walk before you run, practice the basic things.

What specifically don't you understand?

[mihaip007]

Okay - I understand what you are saying...!

The issue is - I don't know if I am on the right path with this "extension" idea of a GridView, in which case I don't understand how to implement it...! But it REALLY sounds like I need to give up on the whole thing with this feature and perhaps wait for someone to come up with something!

You see I develop the back ends...! So I have already a lot of work done in the php infrastructure and the mysql structure...! So I was looking for a manner to display it to the users in a windows manner because users are more used to these sort of interfaces...!

I came across extjs about two to three months ago I think (even before the 2.0 upgrade)...! I totally fell in love with it...So I have already started to create screens and layouts for the user interfaces of different parts of my application. Then I thought a far simpler and neater navigation between different parts of the application would be in a Control Panel Style layout - ie thumbnails! Yet it proved to be the most difficult part of all of them...! And I appreciate the reasoning behind it...!

I was hoping I was NOT the only one wanting to do a thumbnail view (but Filespots seemed to do the exact thing except they are protecting their source)!!!

And that's it - no one else???? hmmmm!

But once again thank you for making me aware that it is NOT as easy as the other features this really amazing framework has in store...!

[mystix]

@mihai, if you could be so KIND as to STOP posting ALTERNATE words in CAPS, it would HELP minimise distractions for ppl READING this thread.

[edit]
no offence but it's really irritating reading words in alternate caps. thanks.

[mihaip007]

Sorry will do...! It's a habit since the days where there were no bold buttons! Sorry...!

[mihaip007]

Okay - a kick in the bum: one step forward hahahaha!!!!

I went ahead and created a file called GroupingDataView.js which extends GroupingView.js which in turn extends GridView.js...!

Then I copied all the Dataview.js in the new file and started combining it...! Eventually I managed to display a grid with thumbnails, but it looks and acts more like DataView hahahaha! And I understand why: there is a part where the template gets overwritten.

This is a bit too much for me i think right now, so then I eventually just deleted all the contents from the new file (and left just the extending part)..! The grid now shows as normally. So then I went ahead and looked inside the GridView.js and found out that there are templates for the headers (the field names with their context menus etc...), and then all the rows, cells etc...!

Now if I can just override that part with a way to allow a person to create their template the same way DataView works (ie tpl: blah blah), then the displayed thumbnail can be also formated as well as sorted, and grouped...! This may take me a rather while...! So I was wondering whether I am on the right path or whether there is something like this already written - because I just cannot find something like it...!

Once again thank you for listening to me as well - I appreciate all the help given...!

I think the following needs to be done:

Calculate the amnount of records to be displayed, and then get an even number of columns per row. (surely depending on the width of the grid)


Change the row into a cell that contains the template shown in the tpl config (just like dataview)
Keep the headers and their context menus.


I am on the right path? Could you help with anything??? Please Please!!!

[Animal]

Do you need grouping?

Have you just created a DataView which displays float:left items based on a template?

[mihaip007]

Hi Animal - yes I do need grouping! Unfortunately it is a requirement hehehehe! But what I did was trying to extend the GroupingView using parts of the code from Dataview! I got stuck there...! I don't know if this will help though. :)

[mihaip007]

Hello all...! I have attached one file containing my working files to this to show you what I am trying to do! let's summarize: I want to extend the GroupingView with a new class called GroupingDataView!

The idea is to apply a template for a record view (such as a thumbnail), and then restructure the rows of the grid to become td's or something that runs across the screen instead of tr's which run beneath each other.

Then it would be easy to generate the different views such as thumbnails or rows...!

So what I have started doing is to merge the necessary parts from GroupingView and the GridView and implement the DataView template handling. Man I am lost hahahaha!!!

Okay so if you run the program (please use the normal get-images.php from the dataview example folders (as well as the images folder) not attached here. You will see that the grid is slightly modified! It generates an error if you resize the heading columns, so please don't for now! I think they point to non-existing cells as I have changed the script slightly...!

Okay for the ts.rows part of the class! I am totally lost on how to implement the template assigned in browser.html as config setting tpl:etc...

Could someone take a look at this and see whether there is some input that could get me a bit further???

I think it would be a very useful widget for a straight forward panel with lots of links that has the abillity to sort, and group! By the way the grouping works...and so does the sorting! The trouble lies where the ts.cell is assigned as purely {value} inside the GroupingDataView file. Whereas in the template sent as a config option allows the developer to create his/her own view and decide which field shows where. I hop I did not loose you by now so I will probablyh stop here. But please please if there is anything that you could contribute to this - I will be totally grateful. By the way I am aiming to place this as a downloadable extension for the masses hehehe!

Thanks again for taking the time to have a look at my cries of help :)

[dawesi]

Just a thought, but I suppose you could achieve this using multiple filtered dataviews in panels using the portal layout... that way they could also be movable without having to extend classes... just a thought.

[mihaip007]

I went to the new site of extjs on http://extjs.com/products/extjs/ and there I saw the menu/thumbnail view I may be able to use! I downloaded it, and I delved into it!

The way it works, they use css styles to change the view format which is a bit ugly when you have to resize the images that way! So I went ahead and used a different manner! The way I did it is that I added two new templates like so:




var tpl = new Ext.XTemplate(
'<div id="sample-ct">',
'<tpl for=".">',
'<div><a name="{id}" id="{id}"></a><h2><div align="left" unselectable="on">{title}</div></h2>',
'<dl>',
'<tpl for="samples">',
'<dd ext:url="{url}"><img title="{text}" src="32x32/{icon}"/>',
'<div align="left"><h4>{text}</h4><p>{desc}</p></div>',
'</dd>',
'</tpl>',
'<div style="clear:left"></div></dl></div>',
'</tpl>',
'</div>'
);

var condensedtpl = new Ext.XTemplate(
'<div id="sample-ct">',
'<tpl for=".">',
'<div><a name="{id}" id="{id}"></a><h2><div align="left" unselectable="on">{title}</div></h2>',
'<dl>',
'<tpl for="samples">',
'<dd ext:url="{url}"><img title="{text}" src="32x32/{icon}"/>',
'<div><h4>{text}</h4><p>{desc}</p></div>',
'</dd>',
'</tpl>',
'<div style="clear:left"></div></dl></div>',
'</tpl>',
'</div>'
);

var minitpl = new Ext.XTemplate(
'<div id="sample-ct">',
'<tpl for=".">',
'<div><a name="{id}" id="{id}"></a><h2><div align="left" unselectable="on">{title}</div></h2>',
'<dl>',
'<tpl for="samples">',
'<dd ext:url="{url}"><img title="{text}" src="16x16/{icon-mini}"/>',
'<div><h4>{text}</h4><p>{desc}</p></div>',
'</dd>',
'</tpl>',
'<div style="clear:left"></div></dl></div>',
'</tpl>',
'</div>'
);


....and you will see that now I can change the entire layout of the thumbnail view as I please! and it also has the feature of some form of grouping!

Now - I had to add another attribute: value under the catalogue definition. such as 'icon-mini': 'icon-new.png' which it allows me to define a smaller thumbnail for a different view!

But I am still struggeling to understand this thing! Is this a dataview??? or a grid??? or what is it? Because it does not say anywhere what it is!

It's just a variable called catalogue which holds sets of data! And then a template is applied to a div. But how on earth does it do the grouping??? Okay - I do have a problem! The issue is that when I click on a different view then I choose a different template to be reloaded onto the div! like so:


if (className == 'mini-view'){
minitpl.overwrite(ct, catalog);
}else if (className == 'condensed-view'){
condensedtpl.overwrite(ct, catalog);
}else{
tpl.overwrite(ct, catalog);
}


When I do that, then all the heders that I chose to be compressed (instead of expanded), they re-expand! How do I make it remember the expansion???

And finally, can I not do something similar to a dataview??? So I can actually use a store???

Thanks a lot!!!

Mihai

[mihaip007]

Okay I got something new! Anytime you guys feel that you could contribute with some advice it would be very appreciated hahaha!

Anyway : I was playing around and found that I can change the tpl config option with a different tpl! The way to do it is to create a different tpl variable and then on a button click somewhere (a menu link perhaps), one can do something like this:



thumbsView.tpl = smalltpl;
thumbsView.refresh();


...thumbsView being the actual DataView.

Then there was this thing that just hit me. How about creating a grid underneath a dataview and with the only things visible being the column headers that can help me sort, and show different field and group. I must say I don't have a faintest idea how to do that. Nor do I know whether the sorting feature would also affect the dataview. Yes they would have to use the same store.

Then I could have a datavew shown above it as mentioned above, and then when I switch the views from mini, to maxi, to details then I can hide the dataview and the grid shown below it would then show up, and be controlled.

I still won't know how to generate a grouping on the dataview panel though! I did find though a template feature that does some form of grouping as shown on the following page: http://extjs.com/products/extjs/

there you will see that the samples are grouped and displayed categorically. You can compact or expand them...!

Anyway - just a thought form whoever may find it useful as much as I may find it once the whole thing can be developed.

Yours truly... Mihai