how to use multiple controls with extjs

Question

just been thru the following example.

http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

This walks thru setting a clean mvc structure and adding a grid to a page. On my website i wish to use many extjs features. But would like some clarity on the following.

1) typically would 1 website have only one app.js or would i create a new application per feature. So if i would like 1) contact info grid 2) news grid 3) a chart. Does mean 3 applications.

This is how i currently load my application ( which is a grid )

index.html

<html>
<head>
    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js

Ext.application({
    name: 'AM',
    appFolder: 'app',
    controllers: [
            'Users'
            ],
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'userlist',
                    title: 'Users',
                    html: 'List of users will go here'
                }
            ]
        });
    }
});

did you ever resolve this. I too am working on implementing a web application that has multiple pages with a different component or multiple components on a single page. I have had issues trying to get them to render correctly with a model theme for one component interfering with another. In the end I have just written on file for each component which is making this project huge. Could you comment on what you resolved to do doing. — vbNewbie

Eoin O'Sullivan Eoin O'Sullivan · Accepted Answer · 2011-07-20T11:22:24

@Frosty, You only need one application file per website.

You are encouraged to create separate classes for grids, charts and any other components that you will be using in your website. Each class should go into a separate file.

So then when you create an instance of your component using Ext.create, EXTJS4 will dynamically load that javascript file. This helps with performance issues in a large application as all the files don't need to be brought down on the page load.

how to use multiple controls with extjs

1 Answers