Basic Learning ExtJS notes (1)

After reading books for a few days, I checked the API. I can't remember much in my mind, so it's better to learn from it. Try to start writing:
First, start to build an interface framework.
The first step is to reference ExtJs related files:
<Link rel = "Stylesheet et" href = "resources/css/ext-all.css"/>
<Script type = "text/javascript" src = "ext-base.js"> </script>
<Script type = "text/javascript" src = "ext-all-debug.js"> </script>
Define an Ext. Viewport:
Set in items attributes:
Header:
Copy codeThe Code is as follows:
{
Region: 'north ',
Html: '

AutoHeight: false,
Border: false,
Margins: '0 0 5 0'
}

Management tree on the left:
Copy codeThe Code is as follows:
{
Region: 'west ',
Collapsible: true,
Title: 'Manage menus ',
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: 'user list', leaf: true
}
]
},
{Id: 'News ',
Text: 'news information ',
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 the Panel has been opened
N = contentPanel. add ({
'Id': node. id,
'Title': node. text,
Closable: true,
AutoLoad :{
Url: node. id + '.html ',
Scripts: true
} // Use the autoLoad attribute to load the target page. To use a script, you must add the scripts attribute.
});
}
ContentPanel. setActiveTab (n );
}
}
}

Function panel on the right:
Copy codeThe Code is as follows:
New Ext. TabPanel ({
Region: 'center ',
EnableTabScroll: true,
ActiveTab: 0,
Items :[{
Id: 'homepage ',
Title: 'homepage ',
AutoScroll: true,
Html: '<div style = "position: absolute; color: # ff0000; top: 40%; left: 40%;"> homepage </div>'
}]
});

This is a simple interface. The interface is as follows: