Extjs4---用MVC做的后台管理系统之二

最新推荐文章于 2024-08-15 14:16:57 发布

小姐你喜不喜欢吃青椒

最新推荐文章于 2024-08-15 14:16:57 发布

阅读量4.5k

点赞数 2

分类专栏： extjs4 Java Web 文章标签： mvc extjs header stylesheet button html

本文链接：https://blog.csdn.net/lc448986375/article/details/8019731

版权

extjs4 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

Java Web

25 篇文章 0 订阅

订阅专栏

做了下修改，刚才发的时候没有建立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);
	}
});

在“首页设置”中的tab中引入了一个普通的页面：

<!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>

效果图：