Floating panels (like the one below) are a great way to present helpful content, such as a form or help text, within the context of a parent user interface screen. Unfortunately, the Sencha Touch documentation fails once again at clearly explaining a useful framework feature. In the Ext.Panel documentation, they show some crazy way to use the Ext.Panel.showBy method, which is extremely unhelpful and dosen’t show how to use it in an MVC context. Further, the Overlays sample application is obfuscated and breaks all MVC convention and most general Sencha Touch conventions. Here’s a brief tutorial on how to actually use this in an MVC application.
Floating Panels are simply Ext.Panel controls that are hidden from the main Viewport. These panels are displayed much like an Ext.Msg.alert call, with the ability to customize them at a finer level of detail.
The panel itself is fairly easy to create:
Ext.define('App.view.FloatingPanelView', {
extend: 'Ext.Panel',
alias: 'widget.floatingPanel',
config: {
id: 'floatingPanel',
html: '<p>Here's some content.</p>',
styleHtmlContent: true,
hidden: true,
modal:true,
hideOnMaskTap:true,
height: '200px',
width: '200px',
scrollable: 'vertical'
}
});
The modal and hideOnMaskTap configs provides the user with a visual indication that they can tap anywhere on the screen away from the panel to close the panel. The height and width configs take any CSS compatible pixel or percentage value. You can use maxHeight and maxWidth to loosely define hiehgt and width if you are not using the optional scrollable config.
A tricky piece is the scrollable config. It defaults to false and requires strings such as ‘vertical’ or ‘horizontal’ do indicate the direction of scrolling allowed. If you not explicitly define a height and width config, however, your panel will be displayed as a jumbled mess. This behavior is not officially documented at all, however this Sencha thread discusses the issue.
To show the panel on the tap of a button, you use it in your controller (or listener) like so:
Ext.define('App.controller.PanelDemoController', {
extend: 'Ext.app.Controller',
config: {
control: {
myButton: {
tap: 'myButton_tap'
}
}
refs: {
myButton: '#myButton',
floatingPanel: '#floatingPanel'
}
}
myButton_tap: function(button) {
this.getFloatingPanel().showBy(button, 'br-tc?');
}
});
The Ext.Panel.showBy method automatically builds a frame around your panel and an arrow pointing at the button passed in the first argument. The second argument is a cryptic string:
- The first two characters describe the arrow’s placement relative to the panel, in this example “bottom right”
- The two characters after the dash describe the arrow’s placement relative to the item tapped, in this example “top center”
- The final ? is optonal and forces the panel to be visible within the bounds of the Viewport. Omit this at your own risk!
The decoder ring for these strings are located in the Ext.Panel.showBy documentation.
I know this dosen’t describe everything floating panel related, such as using the Exp.Panel.show method or quirks using forms inside of a floating panel. Perhaps I will get to this down the road!
by Dale Carnegie: Yes, this book is very old, and the stories Carnegie tells feel very antiquated. Regardless, this book is essential for understanding how to truly engage people you encounter in any situation in your life.
by David Allen: This book, commonly referred to on the interwebs as “GTD,” was literally life changing for me. Allen explains that all the junk in your head relating to the things you need to do on a daily basis distracts you from actually accomplishing anything at all. The GTD system is absolutely brilliant, showing you how to best organize all of the “action items” of your life and actually accomplish them without fear of forgetting something somewhere down the line. If you are “gifted” with any degree of ADHD, as I am, this book alone will help you dramatically.
by Tim Ferriss: Want the ability to work for your your self from anywhere in the world with as little work output as possible at any time? It’s a little far-fetched for those of us who choose to have kids and pets, but the lessons learned in this book are fantastic. It’s a great blueprint for maximizing your productivity through minimizing distractions from meetings, email, and co-workers while setting up your own business.
by Jim Collins: A classic business book examining the real-life qualities of leadership that build companies that can stand the test of time. Collins uses real empirical data mixed with classic metaphors such as the Hedgehog Principle and the Flywheel Principle to demonstrate what it takes to be a true leader forging a great company.
from The Disney Institute: This is a book I urge teams that I lead to read. It is a quick, easy read that highlights the 
by Jason Fried and David Heinemeier Hansson: This book is a recent one for me, and I am tempted to move it to the mandatory essential list. The authors are the founders of 37Signals, creators of Basecamp, and (for DHH) the inventor of Ruby on Rails. It is a collection of essays that underscore very important themes. Limit office distractions, emphasize less over more, simplify instead of adding more features, realize that planning is just guessing, get started now instead of later, and learn from your successes instead of your mistakes.
by Stephen Covey: A classic that I recommend reading immediately after How to Win Friends and Influence People.
by Dave Ramsey: A great primer for those running or starting their own business. Ramsey inserts his deep spiritual beliefs into the book regularly, which influences his advice on hiring and human resources issues in a manner that I disagree with. Overall, I found the business content of the book to be excellent.
by Robert C. Martin: If you write code, you must read this book. You must understand this book. You should live this book.