Home > Developer > JavaScript
The simplest example of MVC ExtJS4
From ExtJS4.0, ExtJS supports the MVC Architecture, allowing front-end developers to better implement data and logical separation, using
View, Controller, and Model components are defined to complete browser front-end services. Improve code maintainability. ExtJS
The View is in passive mode and is held by the Controller.
A simple MVC App instance based on ExtJS4, which consists of Contoller, View, Model, and Store.
The directory structure must follow the following structure:
Each ExtJS Application must start with creating an Ext. app. Application instance, and app/app. js must create an Application instance.
And complete initialization. Name: 'users' indicates that the namespace is USERS. The source code is as follows:
[Javascript]
Ext. Loader. setConfig ({
Enabled: true
});
Ext. create ('ext. app. application ',{
Name: 'users ',
AutoCreateViewport: false,
Controllers: ['users'],
Launch: function (){
}
});
Define a Controller
The Controller will bind an Application. the actual purpose of the Controller is to listen to events and make appropriate response actions.
Generally, these events are user operations on The View. Create a Controller for app/controller/Users. js
[Javascript]
Ext. define ('users. controller. users ',{
Extend: 'ext. app. controller ',
Models: ['user'],
Stores: ['users'],
Views: ['panel ', 'grid'],
Init: function (){
Ext. create ('users. view. Panel ',{
Layout: 'fit ',
Height: 300,
Width: 500,
Items :{
Xtype: 'userlist'
},
RenderTo: document. body
});
Ext. create ('users. view. grid'). show ();
}
});
Define two views. app/View/Grid. js creates an EXT Grid view to display data.
[Javascript]
Ext. define ('users. view. grid ',{
Extend: 'ext. grid. Panel ',
Alias: 'widget. userlist ',
Title: 'user Contact info ',
Store: 'users ',
Columns :[{
Header: 'name ',
DataIndex: 'name ',
Flex: 1
},{
Header: 'email ',
DataIndex: 'email ',
Flex: 1
}]
});
App/view/Panel. js is the layout for creating the EXT Panel View to build the Grid.
[Javascript]
Ext. define ('users. view. Panel ',{
Extend: 'ext. panel. Panel'
});
Define a data Model app/model/User. js
[Javascript]
Ext. define ('users. model. user ',{
Extend: 'ext. data. model ',
Fields: ['id', 'name', 'email ']
});
Define data store app/store/User. js
[Javascript]
Var myData = [
[1, 'gloomyfish ', 'bfnh1998 @ hotmail.com'],
[2, 'Bob deno', 'bobwindy @ yahoo.com '],
[3, 'Rose Kate ', 'kittygroup @ facebook.com']
];
Ext. define ('users. store. users ',{
Extend: 'ext. data. store ',
Model: 'users. model. user ',
AutoLoad: true,
Data: myData
});
The code of the HTML page at the same layer of the app is as follows:
[Html]
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title id = "page-title"> Simple MVC Application </title>
<Link rel = "stylesheet" type = "text/css" href = "extjs/resources/css/ext-all.css">
<Style type = "text/css">
Body {
Margin-top: 30px;
Margin-right: 30px;
Margin-bottom: 30px;
Margin-left: 30px;
}
</Style>
<Script type = "text/javascript" src = "extjs/ext-all.js"> </script>
<Script type = "text/javascript" src = "app/app. js"> </script>
</Head>
<Body>
</Body>
</Html>
The running effect is as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
