PDA

View Full Version : Shortcuts on Web Desktop



alfa19
20 Dec 2013, 8:44 AM
Hi all,

i think this is a very stupid question, but is about an hour i am thinking and my mind is completely out 8-|.

Starting from the Web Desktop example, go to App.js (EXTJS-PATH\examples\desktop) and go to line 64. This is the Shortcuts store. Add for example other 10 elements to that store.
Now navigate to the desktop page and....the shortcuts are rendered in only one column, and only the first 7/8 are shown, because the other going down.

So, what's the best way to render icons in column like in the standard os?

Image 1 is what i'm seeing now, Image 2 is what i want to see:

47320 47321

Thanks!!

scottmartin
20 Dec 2013, 10:22 AM
Have a look at the app/Desktop.js :: createDataView().

Might have to setup a column span config.

alfa19
22 Dec 2013, 11:59 PM
Sorry but i don't understand :(

Can u make an example?

Rasta1462
23 Dec 2013, 11:21 AM
Hi
Do you using the desktop example of Extjs?

Rasta1462
23 Dec 2013, 11:34 AM
Hi,

You can do it with two way: first with CSS, and second way is you must calculate it. I use 'refresh' and loop on icon on desktop ...

alfa19
23 Dec 2013, 1:53 PM
Hi
Do you using the desktop example of Extjs?

I'm started from the example, but actually my desktop is much more remote-based. Anyway if i find a solution for the example i can easily replicate it on my system.


Hi,

You can do it with two way: first with CSS, and second way is you must calculate it. I use 'refresh' and loop on icon on desktop ...

Ok CSS is the way, rather than calculating i prefer use the float: left property and go horizontaly instead of vertically.

But, can u show me how to use CSS for my purpose?

Thanks to all for the responses :)

Rasta1462
24 Dec 2013, 12:39 AM
I'm started from the example, but actually my desktop is much more remote-based. Anyway if i find a solution for the example i can easily replicate it on my system.



Ok CSS is the way, rather than calculating i prefer use the float: left property and go horizontaly instead of vertically.

But, can u show me how to use CSS for my purpose?

Thanks to all for the responses :)

Hi,
This is sample css,
<div id="container">
<div id="area">area1</div>
<div id="area">area2</div>
<div id="area">area3</div>
<div id="area">area4</div>
<div id="area">area5</div>
<div id="area">area6</div>
</div>

#container {
position: relative;
background-color: red;
max-width: 200px;
min-height: 500px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-column-width: 70px;
-webkit-column-width: 70px;
-o-column-width: 70px;
-ie-column-width: 70px;
column-width: 70px;
}
#area {
background-color: yellow;
display: inline-block;
font: italic 25px/70px georgia;
height: 70px;
margin-bottom: 21px;
text-align: center;
width: 70px;
}

but if you want to have drag and drop the icon this solution dose not work, I test it:)

alfa19
27 Dec 2013, 1:20 PM
mmm...this solution need to known the height of container and in any case puts a lot of complexity in case of page resizing.

bringrainfire
5 Jan 2014, 1:35 PM
part of css is its ability to divide the page into "grids" or "containers" it can be achieved in multiple ways, for a fluid grid you will want to define the width and heights as aof the page's total size. the following is a quick dive into the concept.http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/

alfa19
15 Jan 2014, 2:20 AM
Can u highlight me the interesting part? because in this way is unreadable thanks anyway

Rasta1462
16 Jan 2014, 10:47 AM
'refresh':function(){
var me = this,
height = this.getHeight(),
x = 0,
y = 0;
// get the max width and height of shortcuts
if (!me.itemWidth && !me.itemHeight) {
me.itemHeight = 0;
var h = 0, rh;
this.all.each(function(item) {
var el = Ext.get(item),
box = el.getBox();
me.itemWidth = me.itemWidth || box.right;
me.itemHeight = (rh = box.bottom - h) > me.itemHeight ? rh : me.itemHeight;
h = box.bottom;
});
}


this.all.each(function(item) {
var el = Ext.get(item);
if ((y + me.itemHeight) > height) {
x += me.itemWidth;
y = 0;
}
el.setXY([x, y]);
y += me.itemHeight;
});
}