The book looks at the API roughly for a few days. The mind can not remember how much, learning or hands-on better. Just try to start writing:
First: Start with an interface frame.
The first step, of course, is to refer to ExtJS's related documents:
<link rel= "Stylesheet" 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 a Ext.viewport:
Set in the properties of the items:
Head:
Copy Code code as follows:
{
Region: ' North ',
HTML: '
Autoheight:false,
Border:false,
Margins: ' 0 0 5 0 '
}
Management tree on the left:
Copy Code code as follows:
{
Region: ' West ',
Collapsible:true,
Title: ' Manage 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: ' 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 if the panel is already open
n = Contentpanel.add ({
' ID ': node.id,
' title ': Node.text,
Closable:true,
AutoLoad: {
Url:node.id + '. html ',
Scripts:true
///The target page is loaded through the AutoLoad property, and if you want to use the script, you must add the Scripts property
});
}
Contentpanel.setactivetab (n);
}
}
}
Right specific function panel area:
Copy Code code as follows:
New Ext.tabpanel ({
Region: ' Center ',
Enabletabscroll:true,
activetab:0,
Items: [{
ID: ' homepage ',
Title: ' Home ',
Autoscroll:true,
HTML: ' <div style= ' position:absolute;color: #ff0000; top:40%;left:40%; " > Home </div> '
}]
});
Such a simple interface is put out. The interface is as follows:
