Best Practice using Extjs

0
votes

I am working on an extjs project. I have few pages that might have different layout. Is it a good idea to have different viewport, or it's best practice to just use one viewport in an application and change the components. Thank you.

1
extjs
Reuse of code is best practice in any software, Ext JS included. So unless your viewport is somehow differentiated between pages, reusing the same class would seem to be the ideal. - existdissolve
thank you for the comments, I found out card layout is the right way to solve that instead of using multiple viewport - cheftao

1 Answers

0
votes

Whenever I can I use only 1 viewport usually with a border layout, I can put and remove components and change the layout of them, but when I have different entry points for my app...

Let's say you have an app that is a sales store where customers and employees should access, what would you do in that case?

I think multiple viewports also comes handy when you have different entry points that should render different components depending on business rules.

SalesApp
    app
        model
        view
        controller
        store
    employees.html    //includes employees.js
    customers.html    //includes customers.js
    employees.js      //includes all views, models controllers and stores required 
    customers.js      //...

Inside of employees.js you would create a viewport like this: 

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'RCV2',
    appFolder: 'app',
    controllers: [],
    views: [
        "ReporteConcentradoGrid",
        "ParametrosReporteConcentradoForm"
    ],
    stores: [
             "ReporteConcentradoStore"
    ],
    model: [
            "RegistroReporteConcentrado"

    ],
   launch: function () {

        Ext.create("Ext.container.Viewport",{
            layout: 'border',   
            items:[
                   {
                       xtype:   'prcf',
                       title:   'Filtros',
                       region:  'north', 
                       height:   100    
                   },
                   {
                       xtype:   'reporteconcentradogrid',
                       region:  'center'
                   }

                   ]
        });
    }
});