1. #1
    Sencha User mxracer's Avatar
    Join Date
    Apr 2007
    Location
    Napoleon, OH
    Posts
    299
    Vote Rating
    0
    mxracer is on a distinguished road

      0  

    Default Start Menu for 2.0 Desktop

    Start Menu for 2.0 Desktop


    I have put this project on GitHub:
    https://github.com/ToddMurdock/qWikiOffice

    Mar. 8th.

    The desktop shortcuts are no longer limited to a single column. They self manage their positions based on the desktop height.

    Files updated are

    1. system/core/Desktop.js
    2. system/core/Shortcut.js
    3. resources/css/desktop.css


    Feb. 22nd.

    Version 0.7.1 is available.

    Dec. 20th.
    1. Updated DesktopConfig.js and App.js. There was a bug in the code. Sub sub menus, and so on, was not supported in the start menu. I updated App.js initStartMenu().
    2. Taskbar wasn't being displayed properly in FF 3 Beta 2. Re-ordered the include statements to fix it.
    3. Added code to App.js to prevent the backspace (history back 1) shortcut while in the desktop environment.
    4. Updated Ext.ux.TaskBar.TaskButton in Taskbar.js. TaskButton's context menu now checks for window's maximizable and closable properties.
    5. Worked on Vista theme, login.js and login.css.
    6. Updated Preferences window with ability to set and save Auto Run apps.

    Dec. 11th.
    1. New directory structure
    2. Db tables updated
    3. Theme support added to Preferences module
    View readme.txt in the zip file.

    Desktop Config
    1. Added a context menu for the Desktop.
    2. Now all modules are passed into the initModules() method, which no longer adds them to the Start Menu. This allows modules to be initialized into the desktop without adding them to the Start Menu.
    3. Modules are now added to the Desktops Context Menu, Start Menu and Quick Start in the initDesktopContextMenu, initStartMenu() and initQuickStart() method respectively. These methods use the desktopConfig object to add modules.
    4. The DesktopConfig can be hard coded or passed in via json from the server.

    Preferences Window
    1. Dec. 11th. Theme support added.
    2. Can set Taskbar transparency.
    3. Wallpapers loading. Now saving to database.
    4. Now saving to the database.
    5. Hooked up the Preferences tool button in the Start Menu to open the Preferences window. Preferences window contains a West and Center panel. The center panel is loaded with a Checkbox Tree. The tree is is loaded with all apps, any that are currently in the Quick Start panel are checked.
    6. Which apps appear in the Quick Start panel can be controlled by checking their items in the Quick Start tree. Code is in place that gathers all checked item id's when the Save button is clicked.

    Misc.
    1. Multiple code changes. Start Menu and Quick Start apps can now be either hard coded or passed in from json data.
    2. Added Preferences window.
    3. Added Start Menu config option: toolPanelWidth.
    4. Added Jack's code improvements from his demo.
    5. Can now add the Quick Start apps from local or remote data.
    6. Tool items in the Start Menu are now buttons. I'll update the zip file once I've cleaned up the code.

    To Do's
    1. [Dec. 5th]Finish Preferences window. Hopefully this week.

    Extensions:
    1. Ext.ux.StartMenuTool, extends Ext.menu.Item
    2. Ext.ux.StartMenu, extends Ext.menu.Menu
    3. Ext.ux.Taskbar, extends Ext.util.Observable
    4. Ext.Desktop, modified from Jack's demo

    Features:
    1. Start Menu.
    2. Scrollable taskbar. I ported the tab scrolling code into the Taskbar.
    3. Quick start panel with working menu button that appears if you resize the panel down so some of the buttons are hidden. The menu updates so only the hidden buttons are listed as items

    Known Issues
    1. FIXED The quick start panel is now working correctly in all the browsers I have. The bug in Opera and Safari was a simple CSS error on my part.
    2. In IE 6, if you grab the split bar that is between the Quick Start panel and the Task Buttons Panel, you can only resize to the right, not the left. I'm not sure if this is a bug with Ext or if its my doing yet.

    Browsers I have to test with
    1. FF 2
    2. IE 6
    3. IE 7
    4. Opera 9
    5. Safari for Windows


  2. #2
    Sencha User santoshrestha's Avatar
    Join Date
    Jul 2007
    Posts
    27
    Vote Rating
    0
    santoshrestha is on a distinguished road

      0  

    Default


    do you have a demo login info?
    Santosh Shrestha

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    That looks real nice!
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  4. #4
    Ext JS Premium Member Foggy's Avatar
    Join Date
    Apr 2007
    Location
    Switzerland
    Posts
    477
    Vote Rating
    0
    Foggy is on a distinguished road

      0  

    Default


    that looks awesome.
    But if you want add some individual style to the start button, you can do something like this

    desktop.htm
    Code:
            <div id="x-desktop">
                <div style="padding:15px;"></div>
            </div>
            
            <div id="x-windows">
                <!-- this div contains the start menu -->
                <div id="x-toolbar" style="float:left;"></div>
                <div id="x-winlist" style="float:left;">
                    <div id="spacer"></div>
                </div>
                <div class="x-clear"></div>
            </div>
    desktop.css
    Code:
    /*
     * Ext JS Library 2.0
     * Copyright(c) 2006-2007, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://www.extjs.com/license
     */
    
    html, body {
    	font: normal 12px tahoma, arial, verdana, sans-serif;
    	margin: 0;
    	padding: 0;
    	border: 0 none;
    	overflow: hidden;
    	height: 100%;
    }
    
    img {
       behavior: url("css/pngbehavior.htc");
    }
    
    
    #x-desktop {
    	width: 100%;
    	height: 100%;
    	border: 0 none;
    	position: relative;
        overflow:hidden;
        zoom: 1;
    }
    
    #x-windows .x-toolbar {
    	border: 0 none;
    	background: 0 none;
    	width: 70px;
    	padding-right: 5px;
    	margin-right: 3px;
    	border-right: 1px solid #3A75BD;
    }
    
    #x-winlist .x-btn {
    	float: left;
    	margin: 2px 0 0 2px;
        position:relative;
    }
    
    #x-winlist button {
    	width: 150px;
    	overflow: hidden;
    	text-align: left;
    	color: #15428b;
    }
    
    #x-windows {
    	border-top: 1px solid #3A75BD;
    	background-color: #D5E2F2;
    	padding-top: 2px;
    	height: 26px;
        position:relative;
    	z-index:12001;
    }
    
    #x-info {
        float:right;
    }
    
    #x-winlist .x-btn-left{
    	background:url(../images/winbar-btn.gif) no-repeat 0 -189px;
    }
    #x-winlist .x-btn-right{
    	background:url(../images/winbar-btn.gif) no-repeat 0 -210px;
    }
    #x-winlist .x-btn-center{
    	background:url(../images/winbar-btn.gif) repeat-x 0 -231px;
    }
    
    #x-winlist .x-btn-over .x-btn-left{
    	background:url(../images/winbar-btn.gif) no-repeat 0 0;
    }
    #x-winlist .x-btn-over  .x-btn-right{
    	background:url(../images/winbar-btn.gif) no-repeat 0 -21px;
    }
    #x-winlist .x-btn-over .x-btn-center{
    	background:url(../images/winbar-btn.gif) repeat-x 0 -42px;
    }
    
    #x-winlist .x-btn-click .x-btn-left{
    	background:url(../images/winbar-btn.gif) no-repeat 0 -63px;
    }
    #x-winlist .x-btn-click  .x-btn-right{
    	background:url(../images/winbar-btn.gif) no-repeat 0 -84px;
    }
    #x-winlist .x-btn-click .x-btn-center{
    	background:url(../images/winbar-btn.gif) repeat-x 0 -105px;
    }
    
    #x-winlist .active-win .x-btn-left{
    	background:url(../images/winbar-btn.gif) no-repeat 0 -126px;
    }
    #x-winlist .active-win  .x-btn-right{
    	background:url(../images/winbar-btn.gif) no-repeat 0 -147px;
    }
    #x-winlist .active-win .x-btn-center{
    	background:url(../images/winbar-btn.gif) repeat-x 0 -168px;
    }
    #x-winlist .active-win .x-btn-center button {
        color:#fff;
    }
    
    #spacer {
    	height: 25px;
    	float: left;
    	width: 0;
    	overflow: hidden;
    	margin-top: 2px;
    }
    
    .x-window-body p,.x-panel-body p {
    	padding: 10px;
    	margin: 0;
    }
    
    .x-window-body {
        background:#fff;
    }
    
    .add {
        background-image:url(../shared/icons/fam/add.gif) !important;
    }
    .option {
        background-image:url(../shared/icons/fam/plugin.gif) !important;
    }
    .remove {
        background-image:url(../shared/icons/fam/delete.gif) !important;
    }
    .save {
        background-image:url(../shared/icons/save.gif) !important;
    }
    And maybe this small snippet could interest you. With this you could submit your form by pressing the enter Button in a Form Field

    Code:
    	function sendForm(e) {
    		if(e.getKey() == e.ENTER){
    			login.getForm().submit({
    				waitMsg:'&Uuml;berpr&uuml;fe Daten...',
    				// callback handler if submit has successed
    				success: doLogin,
    				// callback handler if submit has failed
    				failure: function() {
    					  Ext.MessageBox.alert('Fehler', 'Ihre Login-Daten sind Fehlerhaft');
    				}
    			});
    		}
    	}
    	Ext.get('loginFormUserField').on('keydown', sendForm);/**/
    	Ext.get('loginFormPassField').on('keydown', sendForm);/**/
    	Ext.get('loginFormUserField').focus();
    Attached Images

  5. #5
    Sencha User mxracer's Avatar
    Join Date
    Apr 2007
    Location
    Napoleon, OH
    Posts
    299
    Vote Rating
    0
    mxracer is on a distinguished road

      0  

    Default


    Thanks guys!

    Ok I set up this demo area. Remember its still a work in progress http://qwikioffice.com/desktop-demo/

    Username: demo
    Password: demo

    I have added a Viewport in the x-windows div (not sure if this is the best way Jack?). So now the start button is in the west panel and the TaskbarItems are in the center panel. More to come.

    Foggy. Thanks for the button styling.

  6. #6
    Sencha User genius551v's Avatar
    Join Date
    Mar 2007
    Posts
    287
    Vote Rating
    0
    genius551v is on a distinguished road

      0  

    Default


    Wow man, really impressive!
    tnks for sharing!....

  7. #7
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Looks great. Any plans for how to account for when there are more items in the start bar at the bottom than will fit? Right now the Ext desktop example simply expands the height. Your example does not. Thoughts?
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  8. #8
    Sencha User mxracer's Avatar
    Join Date
    Apr 2007
    Location
    Napoleon, OH
    Posts
    299
    Vote Rating
    0
    mxracer is on a distinguished road

      0  

    Default


    Yeah thats the bad part of using the viewport to make the panels (west, center). Am I correct in thinking the viewport has to be a fixed height according to the CSS?

    Haven't got a concrete answer for you.

    I was thinking of using code to monitor the items and increase the height of the bar.

    Or do like Vista and shrink the buttons down as the number increase, up to a point, and then turn similar buttons (apps) into a single button that opens a menu on click to select the app.

    Any ideas yourself? Open to input.

    Thanks.....Todd

  9. #9
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Awesome stuff dude... Fantastic menu.

    Was going to point of what Jeff mentioned above but figured it's early 2.0 stuff. Also noticed that the responsiveness of the app slowed dramatically with each window I opened. BUT... the menu as I said looks great! Good work!

  10. #10
    Sencha User mxracer's Avatar
    Join Date
    Apr 2007
    Location
    Napoleon, OH
    Posts
    299
    Vote Rating
    0
    mxracer is on a distinguished road

      0  

    Default


    Quote Originally Posted by cluettr View Post
    Also noticed that the responsiveness of the app slowed dramatically with each window I opened.
    I do notice the slowdown in IE 7, not Firefox. But this also happens with the 2.0 desktop demo: http://extjs.com/playpen/ext-2.0/exa...w/desktop.html

    Its not because of the start menu.

    Remember guys, this is a work in progress

Thread Participants: 194

  1. jack.slocum (1 Post)
  2. JeffHowden (4 Posts)
  3. TommyMaintz (1 Post)
  4. genius551v (1 Post)
  5. franklt69 (22 Posts)
  6. galdaka (2 Posts)
  7. jay@moduscreate.com (3 Posts)
  8. potdarko (1 Post)
  9. adrian.tarau (1 Post)
  10. aconran (2 Posts)
  11. HarryC (7 Posts)
  12. stever (5 Posts)
  13. tolstoj (3 Posts)
  14. mystix (3 Posts)
  15. trbs (3 Posts)
  16. fangzhouxing (2 Posts)
  17. cobnet (12 Posts)
  18. jasonw (1 Post)
  19. kitepad (2 Posts)
  20. d0uble_hel1x (1 Post)
  21. ushangar (1 Post)
  22. efreese (5 Posts)
  23. leveille (1 Post)
  24. ben.tremblay (1 Post)
  25. Foggy (2 Posts)
  26. shamoco (3 Posts)
  27. kohwuyea (1 Post)
  28. sgonzalezg (1 Post)
  29. jbonet (4 Posts)
  30. benny (1 Post)
  31. para (1 Post)
  32. cluettr (1 Post)
  33. Lucian (2 Posts)
  34. sturdypine (2 Posts)
  35. ffzhuang (1 Post)
  36. hui2008 (2 Posts)
  37. Konstantin (1 Post)
  38. dickothestar (1 Post)
  39. dennis (1 Post)
  40. twhite56 (1 Post)
  41. aggarat (1 Post)
  42. oracio (1 Post)
  43. sorcerys (3 Posts)
  44. ethraza (11 Posts)
  45. ernieofori (1 Post)
  46. Thomas_K (2 Posts)
  47. Ytorres (22 Posts)
  48. Priet (1 Post)
  49. spidergeuse (1 Post)
  50. hallikpapa (1 Post)
  51. pcrombach (1 Post)
  52. Ronaldo (2 Posts)
  53. mohd_osman (6 Posts)
  54. armaghedon (1 Post)
  55. Gunmen (2 Posts)
  56. Prince_Elrik (1 Post)
  57. mjlecomte (3 Posts)
  58. flatburger (1 Post)
  59. Lev_A (10 Posts)
  60. smokeman (2 Posts)
  61. babsevensix (4 Posts)
  62. Overlord (2 Posts)
  63. carstep (1 Post)
  64. ZooKeeper (3 Posts)
  65. esra (2 Posts)
  66. brookd (5 Posts)
  67. kamelus (1 Post)
  68. liusyan (1 Post)
  69. santoshrestha (1 Post)
  70. atomantic (9 Posts)
  71. koffdsa (1 Post)
  72. attiato (1 Post)
  73. mscdex (1 Post)
  74. elrems (1 Post)
  75. DragonFist (5 Posts)
  76. robin30 (3 Posts)
  77. chrisesler (3 Posts)
  78. cryptor1982 (2 Posts)
  79. hga77 (1 Post)
  80. ThorstenSuckow (1 Post)
  81. tomautobahn (1 Post)
  82. saad_miki (1 Post)
  83. Isaac_cm (1 Post)
  84. luxmenz (1 Post)
  85. nickvidal (1 Post)
  86. Danz (2 Posts)
  87. jvidail (2 Posts)
  88. jobobjet (2 Posts)
  89. wtfowned (1 Post)
  90. Venkateswara Rao (1 Post)
  91. yfzsj (1 Post)
  92. nithhy2003 (2 Posts)
  93. Ashutosh (2 Posts)
  94. codaine (1 Post)
  95. appleboy (1 Post)
  96. webchetan (2 Posts)
  97. coolcourt (1 Post)
  98. kk_kkk (7 Posts)
  99. runnersixty (1 Post)
  100. sam.ds.chen (1 Post)
  101. bryman55 (1 Post)
  102. pppuuu1003 (1 Post)
  103. xl801026 (2 Posts)
  104. slobo (4 Posts)
  105. MuratCorlu (3 Posts)
  106. pgiuseppe (4 Posts)
  107. leongoodboy (1 Post)
  108. kevin.kga (1 Post)
  109. Eugenio (1 Post)
  110. fgerneth (1 Post)
  111. dimentox (3 Posts)
  112. gsylvain35 (9 Posts)
  113. clarkee (4 Posts)
  114. stourwalk (12 Posts)
  115. dizelland (3 Posts)
  116. psikanaliz (1 Post)
  117. KENT (14 Posts)
  118. seamcker (1 Post)
  119. iDevelopment (2 Posts)
  120. netbox (1 Post)
  121. neenhouse (11 Posts)
  122. lcq (1 Post)
  123. silverfang (7 Posts)
  124. rymo (3 Posts)
  125. michaelc (2 Posts)
  126. liuliming (5 Posts)
  127. injest (1 Post)
  128. riff (1 Post)
  129. pristine (1 Post)
  130. neall (1 Post)
  131. streetkiller (1 Post)
  132. bigxxs@gmail.com (2 Posts)
  133. dorgan (1 Post)
  134. Tranquoccuong (1 Post)
  135. dverkade (1 Post)
  136. lobo-tuerto (1 Post)
  137. ynfeiyang (1 Post)
  138. anaxagoras (1 Post)
  139. nicemen (2 Posts)
  140. Relexx (2 Posts)
  141. vizcano (2 Posts)
  142. tanzhiguo (4 Posts)
  143. Maverick1611 (1 Post)
  144. directx32 (1 Post)
  145. Spenca (1 Post)
  146. razor (1 Post)
  147. Jacsoft (3 Posts)
  148. mikemc (2 Posts)
  149. zied (1 Post)
  150. gpstatnon (10 Posts)
  151. extfan (1 Post)
  152. jukac (1 Post)
  153. moegal (1 Post)
  154. salsa (1 Post)
  155. wangtong40 (1 Post)
  156. pokerking400 (1 Post)
  157. gxw81 (1 Post)
  158. yubo1007 (1 Post)
  159. Nitish4uall (1 Post)
  160. baux (1 Post)
  161. kiry (1 Post)
  162. Jumanji (1 Post)
  163. nenge123 (1 Post)
  164. Jo (1 Post)
  165. csr508 (1 Post)
  166. chrizmaster (2 Posts)
  167. willf1976 (1 Post)
  168. dtex-lab (1 Post)
  169. evertonce (1 Post)
  170. addfgg (1 Post)
  171. King_Aero (2 Posts)
  172. simsek97 (1 Post)
  173. billprince (1 Post)
  174. Mycoding (2 Posts)
  175. Remoun (1 Post)
  176. mr-romaniko (2 Posts)
  177. ricoux63 (1 Post)
  178. ababababii (2 Posts)
  179. bibirodger (1 Post)
  180. fxcoder (1 Post)
  181. sosy (1 Post)
  182. Shinichi1210 (1 Post)
  183. xcape010 (3 Posts)
  184. prabhu_prabhu001 (2 Posts)
  185. raloliveX (1 Post)
  186. iranphpmaster (1 Post)
  187. codeme9 (1 Post)
  188. wrfelts (1 Post)
  189. Neilcoder (1 Post)
  190. JayCrossler (1 Post)
  191. Patlatus (1 Post)
  192. xzoner (1 Post)
  193.  adonis (1 Post)
  194. habib.maa10 (1 Post)