Face Planting With Layouts

[mike_strong]

It was easy to conjure up a nested layout using the nested config approach with xtypes.  It rendered nicely.  Got all excited and cocky like, "This stuff is easy-peasy!"

 

Here's the config approach I used that worked:

 

rally-blocked/App.js at master · mjstrong0112/rally-blocked · GitHub 

 

Yet, in more than one tutorial and best-practices article, the authors strongly recommended against taking this approach.

 

For one, they said it's better to save components to local variables for more efficient reference.  This avoids the less performant drill down to find elements by name or ID, etc.  They also said it's more readable and easier to debug.

 

I'm sure the latter is true, once you get the hang of it, but I've tried many variations and I find myself floundering due to my lack of experience in Javascript, in general.  

 

I tried the var approach:

 

var topContainer = Ext.create('Ext.panel.Panel', {

layout: {

type: 'hbox',

align: 'stretch'

}, ...

 

I've tried the property approach:

 

topContainer: Ext.create('Ext.panel.Panel', {

layout: {

type: 'hbox',

align: 'stretch'

}, ...

 

I've tried declaring these inside an Ext.onReady() function, inside the launch function, and just outside of all other functions, at the "top" level.

 

Now I get:

 

 

It's throwing a rod as I try to create the first component, a Release combo box.

 

I lack some fundamental understanding of how things are flowing under the hood, apparently.

 

Again, it's been 12 years since I've coded and this is my first rodeo in Javascript.

 

I realize that I've strayed from some of the demo samples, but some of those are a blend of explicit component creation and xtypes.  I want to do explicit references for all components saved in local variables so I can easily change 1 in response to another being changed.

 

Wish I had some mentor folks co-located with me, in an Agile team sort of way.  

 

Thanks, in advance for any thoughts or coaching.

 

Mike

Attachment(s)

App.js.zip   1 KB 1 version

[mike_strong]

I'm not going to stall out here.  I'll switch to using the TimeBoxScoped app templates, which is what I should have done in the first place.  However, I leave that there for learning purposes. I want to be able to construct custom nested layouts if and when I really need to.

[System]

morky01 mulba01 any thoughts or tips to add?

[morky01]

I actually lean against storing references to components as local variables.  I think it adds clutter to the code, and really, component query (especially if looking up by id) is highly optimized and fast.  You might run into problems if you're creating incredibly deeply nested hierarchies of thousands of components, but I doubt that's the case here.

 

I also generally prefer the style of using container.add({ xtype: 'rallyreleasecombobox' })  rather than Ext.create('Rally.ui.combobox.ReleaseCombobox', {]), but that's mostly personal preference.

 

I agree that extending the TimeboxScopedApp base class is the way to go in this case.  As for why you're getting the console errors above though I'm not sure.  You definitely don't want to do anything with Ext.onReady, since that will fire much earlier than when the SDK is loaded and ready.  There is an analagous Rally.onReady which will get you closer, but I haven't found an app I couldn't write yet using launch within the app as the entry point.  

 

Does that help?  Also, to be fair, ExtJS is pretty different from a lot of JS, and that has become especially true as ES6 and more functional styles have become popular the last few years.  This stuff is hard, and it's awesome you're even trying.  Definitely post back here or on our stackoverflow tag for help!

 

Cheers,

Kyle

[mike_strong]

Thank you, Kyle!  All of that coaching is a huge help!