ext 框架

最新推荐文章于 2022-07-09 10:12:18 发布

aaqq112233add

最新推荐文章于 2022-07-09 10:12:18 发布

阅读量83

点赞数

分类专栏： WEB前台文章标签： EXT 框架 Servlet HTML

本文链接：https://blog.csdn.net/aaqq112233add/article/details/83674415

版权

WEB前台专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[color=blue]
<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ext学习</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript" src="ext/src/locale/ext-lang-zh_CN.js"></script></head>
<script type="text/javascript">

Ext.onReady(function(){
var gridForm = new Ext.FormPanel({
id: 'company-form',
frame: true,
labelAlign: 'left',
title: 'Company data',
bodyStyle:'padding:5px',
layout: 'form',
items: [{
xtype: 'fieldset',
labelWidth:80,
defaultType: 'textfield',
autoHeight: true,
border: false,
items: [{
fieldLabel: '用户名',
allowBlank:false,
name: 'name'
},{
xtype:'numberfield',
fieldLabel: '年龄',
name: 'age'
},{
fieldLabel: '性别',
vtype:'email',
name: 'sex'
},{
xtype: 'datefield',
fieldLabel: '日期',
name: 'lastChange'
}]
}]
});

var window = new Ext.Window({
title:'用户添加',
layout:'fit',
width:280,
height:240,
items:[gridForm],
buttons:[{text:'提交',handler:function(){
gridForm.getForm().submit();
}}]
});

var arr1=['',{xtype:'button',text:'<h2>首页<h2>'}];
var arr=['',{xtype:'button',text:'<h2>用户管理<h2>'}];

var menu=[{title:'用户管理'},
{title:'系统管理'},
{title:'综合管理'},
{title:'日记管理'}];
var employee = Ext.data.Record.create([
{name: 'name'},
{name: 'sex'},
{name: 'age'},
{name: 'remark'}
]);
var store = new Ext.data.Store({
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'string'},
{name: 'sex', type: 'string'},
{name: 'remark', type: 'string'}
],
reader:new Ext.data.JsonReader({
totalProperty: "results",
root:"rows"
},employee),
url:'/extjs/servlet/ListServlet',
baseParams:{limit:15,start:1},
autoLoad:true
});

var colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
new Ext.grid.CheckboxSelectionModel({singleSelect:false}),
{header: '名字', width: 60, sortable:true, dataIndex: 'name'},
{header: '年龄', width: 75, sortable: true, dataIndex: 'age'},
{header: '性别', width: 75, sortable: true, dataIndex: 'sex'},
{header: '备注', width: 75, sortable: true, dataIndex: 'remark'}
]);

var grid = new Ext.grid.GridPanel({
store: store,
tbar:[{xtype:'button',text:'增加',handler:function(){window.show()}}],
bbar:new Ext.PagingToolbar({
store:store,
pageSize: 30,
displayMsg:"显示 {0} - {1}，共 {2} 条",
emptyMsg:'没有数据需要显示'
}),
cm:colModel,
title: '用户管理'
});

var view=new Ext.Viewport({
renderTo:Ext.getBody(),
layout:'border',
items:[
{region:'west',width:200,collapsible:true,title:'返回',layout:'accordion',items:menu,
layoutConfig:{
animate: true
}
},
{
region:'north',height:100,bbar:arr},{region:'center',layout:'fit',items:[grid]}]
});
});
</script>
<body>

</body>

</html>

[/color]