Introductory basic learning ExtJS notes (1)_extjs

I roughly read the books for a few days and checked the API. I can't remember much in my head, so it's better to learn by doing. Just try to start writing:
First of all: start building an interface framework.
The first step is of course to quote the relevant files of ExtJs:



Define an Ext.Viewport:
Set in the attributes of items:
Header:

Copy code The code is as follows:

　　　{
region: 'north',
html: '< h1 class="x-panel-header">CRM Management System',
autoHeight: false,
border: false,
margins: '0 0 5 0'
}

Management tree on the left:

Copy code The code is as follows:

{
region: 'west',
collapsible: true,
title: 'Management Menu',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [
{
text: 'System settings',
leaf: true,
url: 'userlist'
},
{
text: 'User management',
leaf: false,
children: [
{
id: 'userlist', text: 'userlist', leaf: true
}
]
},
{ id: 'news',
text: 'news',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function (node, event) {
//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' node.attributes.text '"');
event.stopEvent( );
var n = contentPanel.getComponent(node.id);
// alert(n);
if (!n && node.leaf == true) { // //Determine whether it has been Open the panel
n = contentPanel.add({
'id': node.id,
'title': node.text,
closable: true,
autoLoad: {
url: node.id '.html',
scripts: true
} // Load the target page through the autoLoad attribute. If you want to use scripts, you must add the scripts attribute
});
}
contentPanel.setActiveTab(n);
}
}
}

Specific function panel area on the right:

Copy code The code is as follows:

new Ext.TabPanel({
region: 'center',
enableTabScroll: true,
activeTab: 0,
items: [{
id: 'homePage',
title: 'Homepage',
autoScroll: true,
html: '

Homepage

'
}]
});

This way A simple interface is built. The interface is as follows: