做了下修改，剛纔發的時候沒有建立store，model
在上一個版本的基礎上添加了一點功能，點擊左邊的Button按鈕可以在右邊添加新的tab，在tab加了頁面，和grid，複習了一下以前學的東西
看代碼：
index.html,app.js沒有修改，這應該就是MVC的優點吧，這裏只貼出修改的代碼：
在左邊的導航欄添加了兩個按鈕：
Accordion.js:
Ext.define('HT.view.Accordion',{
extend:'Ext.panel.Panel',
title:'系統設置',
alias:'widget.accordion',
collapsible: true,
split:true,
width:200,
layout:'accordion',
region:'west',
layoutConfig: {
titleCollapse: true, //設置爲點擊整個標題欄都可以收縮
animate: true, //開啓默認動畫效果
activeOnTop: true //展開的面板總是在最頂層
},
items:[
{
title:'首頁設置',
items:[
{
xtype:'button',
width:150,
id:'homePageSet',
text:'首頁管理'
},{
xtype:'button',
width:150,
id:'adminSet',
text:'管理員管理'
}
]
},{
title:'導航欄設置',
html:'導航欄'
},{
title:'文章設置',
html:'文章設置'
},{
title:'留言設置',
html:'留言'
}
]
});建立model層的 User.js:
Ext.define('HT.model.User',
{
//不要忘了繼承
extend:'Ext.data.Model',
fields:[
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'sex',mapping:'sex'},
{name:'age',mapping:'age'},
{name:'birthdate',mapping:'birthdate',type:'date',dataFormat:'Y-m-d'}
]
}
)建立store層的Users.js:
Ext.define('HT.store.Users',{
//不要忘了繼承
extend:'Ext.data.Store',
//記得設置model
model:'HT.model.User',
//自動加載設爲true
autoLoad:true,
proxy: {
type: 'ajax',
url : 'users',
reader: {
//數據格式爲json
type: 'json',
root: 'users'
}
}
});然後在view中添加了一個Grid：
Grid.js:
Ext.define('HT.view.Grid',{
extend:'Ext.grid.Panel',
title : '人員列表',
initComponent:function(){
Ext.apply(this,{
//width:400,
//height:170,
layout:'fit',
//frame:true,
store:'Users',
columns: [//配置表格列
new Ext.grid.RowNumberer(),//表格行號組件
{header: "編號", width: 80, dataIndex: 'id', sortable: true},
{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
{header: "年齡", width: 80, dataIndex: 'age', sortable: true},
{header: "性別", width: 80, dataIndex: 'sex', sortable: true},
{header: "生日", width: 80, dataIndex: 'birthdate', sortable: true}
]
}),
this.callParent(arguments);
}
});<!DOCTYPE html>
<html>
<head>
<title>setHomePage.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<form action="" method="get">
<table>
<tr>
<td>標題</td>
<td><input type="text" name="title" ></td>
</tr>
<tr>
<td>域名</td>
<td><input type="text" name="yuming" ></td>
</tr>
<tr>
<td>版權信息</td>
<td><input type="text" name="copyright" ></td>
</tr>
<tr>
<td>簡介</td>
<td><input type="text" name="description" ></td>
</tr>
<tr>
<td>
<input type="submit"" >
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
效果圖：
