What is best way to design my code

[mhmda]

I started to learn Extjs lately, and I want to build an application, and I have a question about the best way to write or design the code, I have seen many examples that implement the same goal with diffrent ways (in code) and honestly I'm confused and don't know which the best way to write my code.

39745
For example, see the attached image, the first way to build such application is to use "nested" code in "ITEMS" property, like:
Ext.create('Ext.form.Panel', {
......
......
items: [{
xtype: 'panel',
icon: 'a.png',
title: 'sample 1',
items:[{
xtype: 'panel',
icon: 'b.png',
title: 'sample 2',
items:[{......

The second way is create seperated pointers for every window and link it to specific panel, for example:

var frmMain = Ext.create('Ext.form.Panel', {
items: [],
region:'center',
layout: 'form'
});


Ext.create('Ext.form.Panel', {
height: '100%',
width: '100%',
layout: 'border',
items: [frmMain],
renderTo: Ext.getBody()
});


I would like to know what is the best way to write code?

[Tim Toady]

If you are using MVC, it naturally breaks itself into logical pieces in your views. You don't want a gigantic file that nests large numbers of components, but you don't want to have views that are just a form with no items either. The same goes if you are not using MVC, but I would recommend going the MVC route with any new applications you are building. The app architecture guide does a fair job at explaining how to break down views.

http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt1 (http://docs.sencha.com/ext-js/4-1/#%21/guide/mvc_pt1)