Question

In my application, i have a topbar and bottom tab bar in all the screen. So when user will click a particular tab, it will change only the middle part(the tabbar and toolbar will be same) of the screen. So i want to write some common code for this tabbar and toolbar. So where should i keep those common code?? Is it in view folder??

If any one can share some code or sample project, it will be helpful for me.

Thanks in advance.

Answer 1

Seems that you are going to build an application which is highly optimized.

The best practice is:

1) Your MainView.js should look like:

Ext.define('app.views.MainView', {
  extend: 'Ext.Container' // container is the best way almost time
  config: {
    layout: 'card' // just for example
    items: [
       {xtype: 'MainTopToolbar'},
       {xtype: 'DynamicView'},
       {xtype: 'MainTabBar'},
    ]
    // other configs go here...
  }
})

The purpose of this step is to define an overall layout for your application. As you can see, it contains 3 main components (with the second one dynamic – that’s where you’re going to change according to user’s interactions).

2) Define your xtypes, for example, MainTabBar:

Ext.define('app.views.MainTabBar', {
  extend: 'Ext.TabBar',
  xtype: 'MainTabBar'.
  config: {
    docked: 'bottom',
    items: [
       // your tabs are defined here, see Ext.TabBar docs for more details
    ]
    // other configs go here...
  }
})

3) Put all your xtypes definition file, as well as MainView.js in view folder.

4) In app.js, call Ext.create('app.views.MainView');

This problem is quite general and a little bit complicated, so please spend time brainstorming. If there’s anything clear, please let me know.