Ext

I also have been increasingly working with Ext JS 4, Ruby 1.9 and Rails 3 lately. So this blog might awake again soon. :) Btw, Ext JS 4 Preview Version 4 has been released today: http://www.sencha.com/forum/showthread.php?125072-Ext-JS-4-Releases-and-Notes-(4.0PR4) A lot of people in the Ext JS community wonder about how to customize the design of... their Ext JS application. There are a few ready to install themes available (search the forums ) that you can choose from and I know that Ext is working on 1. making it easier to customize the theme of your app and 2. finding themes (marketplace). But, after all, it isn't already that hard to do. I wanted to add a free floating "Getting Started" panel to my new application Spreadnotes yesterday. Free floating so the new users can start trying out the application without having to close the "Getting Started" info just yet, but rather can move it to the side. I thought an Ext.Window would have all requirements I need. The only thing I need to do was to make the design fit with the application's design. Here's a quick walk through to maybe take the fear of customizing your theme from some of you. :) Through the configuration I already could customize some things I didn't want to show up, such as a header (leaving the title blank), no close button on top right (closable: false) and scrolling of the content (autoScroll: true). The content itself I put into a div with the id 'getting-started', rather then having to deal with a lot of text in JavaScript. The contentEl configuration option is there to use that content. That's the result with the default blue theme: Most Ext JS widgets use background images for special borders and design elements. Firebug or the WebKit's HTML Inspector help you to find the DOM elements and CSS classes which specify the background images. Since some widgets use quite a few DOM element layers, you need to click around a little in the DOM tree to find the specific DOM element with the CSS configuration. See picture below. I obviously didn't do ...Read More