I’ve been wishing for this for a long time and the fine folks at Google delivered. Imagine being able to see the full stack trace when debugging, i.e. when tracing against an AJAX or a setTimeout()! You can do this in Chrome Canary already; read on for how to set it up:
A few years ago I wrote about ExtJS4 Dev Tools of a Pro, where I mentioned a FireFox plugin called Illuminations. Since then I’ve switched to Chrome as my dev platform where I missed my cherished Illuminations plugin.
I believe only last week the creators of FF’s plugin have released a version for Chrome: https://chrome.google.com/webstore/detail/illuminations/hbhnkfhblakpfhcpepeoogmakimflibk
It doesn’t feel like a full port, but it does have the one feature I care most about: similar to how you can right-click on a page and “Inspect Element” to bring up dev tools and pinpoint the target in the DOM tree, you can now right-click and “Illuminate:”
At which point you will pinpoint the target in the Ext component tree:
Combined with Sencha Inspector for Chrome, the Chrome browser is now a powerhouse for ExtJS/Sencha Touch development!
I’ve been liking Sencha’s Architect IDE more and more as it’s been maturing over time. In my last post I wrote about making custom plugins in ExtJS 4, but how do you go about using them through Architect?
First step would be to ensure the we have the plugin code; I accomplished this by adding a JS Resource:
Next step should be easy enough; I figured adding a custom “plugins” property with a value of “[“ux.fadeinplugin”]” on a given Panel would do the trick:
…however, while this does work when tested in browser, this causes Architect’s canvas to go blank, essentially rendering it useless. Upon further research, there are known bugs surrounding this, but no fix yet.
Read on for a workaround in Architect…
I’ve enjoyed the 4.2 ExtJS release since it came out; especially the new theme and grids. I recently wanted to “puff in” a Panel for some eyecandy, but I quickly realized it’s a bit trickier than you might think.
Components don’t have slideOut or fadeIn methods like Elements do.
It’s not a problem in case of “hiding” actions (i.e. slideOut or puff), which you can accomplish by something like component.getEl().slideOut().
However, in the case where you want to “show” a hidden panel (i.e. slideIn), in a case of deferred rendering (i.e. when creating and showing a new panel on the fly), the getEl() doesn’t have a DOM element to show yet, until the panel has been rendered.
The fadeIn method is achieved by showing a panel with CSS opacity 0% and then animating it back to 100%.
I ended up solving this via means of a plugin. Can you think of a more elegant solution?
Continue reading ExtJS 4.2 Plugin Example