Layout browser example in Sencha Architect (MVC)

[iplanit]

Hi,

I am trying to create a viewport and a layout for testing, I wanted to try something like this:

http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html

I would to try this example from Sencha Architect So I can understand some things about it.

I cannot find it in the website for Sencha Architect in MVC.

Because of that, I am looking at the code at the moment and I see that it is using things like:




Ext.create('Ext.Viewport', { layout: 'border', title: 'Ext Layout Browser', items: [{ xtype: 'box', id: 'header', region: 'north', html: '<h1> Ext.Layout.Browser</h1>', height: 30 },{ layout: 'border', id: 'layout-browser', region:'west', border: false, split:true, margins: '2 0 5 5', width: 275, minSize: 100, maxSize: 500, items: [treePanel, detailsPanel] }, contentPanel ], renderTo: Ext.getBody() }); });


And using the layouts in different js files that renders using:




function getBasicLayouts() { [...]
return { /* * ================ Start page config ======================= */ // The default start page, also a simple example of a FitLayout. start: { id: 'start-panel', title: 'Start Page', layout: 'fit', bodyStyle: 'padding:25px', contentEl: 'start-div' // pull existing content from the page },[...]


The example is good, but detailed information about the code, how it works and different real interaction between the layouts,etc. For people that is new to Sencha ExtJS4 it is important.

I think is a good example to have in Sencha Architect and will be useful since I am at this moment trying to fully understand the framework using the MVC approach.

Kind regards

thanks

[mitchellsimoens]

You really need to start basic. Get the layout correct (adding a viewport with layout : 'border' and adding a couple items until you get the layout). Once you get that then you can get more advanced with programming the interactions and such. Don't jump in the deep end of the pool until you can swim.