Home > Developer > JavaScript
I recently learned Extjs4 by myself. Today I tried to use MVC to create a page similar to the background management system. I am gradually improving it. I hope I can provide suggestions for some bad things,
Complete code will be uploaded after it is complete
First, create the corresponding file directory as follows:
Controller: Put the controller folder
Model: Put the model class/entity class, which is not used currently
Store: used to store data temporarily
View:
After creating the directory structure, create the home page: index.html:
[Html]
<! DOCTYPE html>
<Html>
<Head>
<Title> background management system </title>
<Link rel = "stylesheet" type = "text/css" href = "ext4/resources/css/ext-all.css">
<Script type = "text/javascript" src = "ext4/ext-all-debug.js"> </script>
<Script type = "text/javascript" src = "app. js"> </script>
</Head>
<Body>
</Body>
</Html>
Then create app. js:
[Javascript]
Ext. Loader. setConfig ({enabled: true}); // This statement must be added; otherwise, an error is returned.
Ext. application ({
// Define the naming Control
Name: 'ht ',
// Define a folder
AppFolder: 'app ',
// Add a controller
Controllers: ['controllers'],
// This method will be run after the page is fully loaded
Launch: function (){
Ext. create ('ext. container. viewport ',{
// Layout
Layout: 'border ',
Items :[{
Xtype: 'top' // you can write the alias attribute of the view.
},{
Xtype: 'accordion'
},{
Xtype: 'center'
},{
Xtype: 'bottom'
}
]
});
}
}
);
Next, create Controller. js:
[Javascript]
Ext. define ('ht. controller. controllers', {// defines the class
Extend: 'ext. app. controller', // must inherit the Controller
// Add views for the Controller to find
Views :[
'Accordion ',
'Center ',
'Top ',
'Bottom'
],
// Call this method automatically
Init: function (){
Console. log (The panel was rendered ');
}
}
);
Next, we will create four views:
Top. js:
[Javascript]
Ext. define ('ht. view. top ',{
Extend: 'ext. Component ',
Alias: 'widget. top ', // do not forget to write "widget" otherwise it will not be found and the error is reported <a href = "http://blog.csdn.net/lc448986375/article/details/8014401" style = "color: rgb (0, 0, 0 ); text-decoration: none; font-family: 'Microsoft yahei'; line-height: 30px; "> <span style =" font-size: 10px; "> Uncaught TypeError: cannot call method 'string' of undefined </span> </a>
Padding: 10,
Html: 'Welcome to Use ',
Region: 'north'
});
Bottom. js:
[Javascript]
Ext. define ('ht. view. Bottom ',{
Extend: 'ext. Component ',
Padding: 10,
Alias: 'widget. bottom ',
Html: 'All copyrights are welcome to Use ',
Region: 'south'
});
Left-side Navigation Pane: Accordion. js.
[Javascript]
Ext. define ('ht. view. Accordion ',{
Extend: 'ext. panel. Panel ',
Title: 'System settings ',
Alias: 'widget. accordion ',
// Whether it can be folded
Collapsible: true,
// Whether the width can be changed by dragging
Split: true,
Width: 200,
// Layout
Layout: 'accordion ',
Region: 'west ',
LayoutConfig :{
TitleCollapse: true, // you can click it to shrink the entire title bar.
Animate: true, // enable the default animation effect
ActiveOnTop: true // The expanded panel is always at the top layer.
},
Items :[
{
Title: 'homepage settings ',
Html: 'set homepage'
},{
Title: 'navigation bar settings ',
Html: 'navigation bar'
},{
Title: 'Article settings ',
Html: 'Article settings'
},{
Title: 'message settings ',
Html: 'login'
}
]
});
Tabpanel, Center. js used in the middle:
[Javascript]
Ext. define ('ht. view. Center ',{
Extend: 'ext. tab. Panel ',
// Layout: 'fit ',
// Add the widget.
Alias: 'widget. Center ',
Region: 'center ',
ActiveTab: 0,
Items :[
{
Title: 'homepage ',
Html: 'Welcome to Background Management System Version 1.0'
}
],
InitComponent: function (){
This. callParent (arguments );
}
}
)
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
