Extjs框架总结
Extjs框架知识总结
概述
Ext是基于Web的富客户端框架，其完全是基于标准W3C技术构建的，使用到的都是HTML、CSS、DIV等相关技术。Extjs提供了大量已经封装好的可以直接使用的组件，上手容易。以下是基于Extjs框架整合的demo。
Extjs框架可分为五个部分：
- HTML页面：加载js插件，承载界面显示
- Controller.js：控制各个组件，以及实现事件监听
- View.js：实现页面的布局
- Store.js：提供数据信息，可以通过代理向后台获取表单数据
- Model.js：数据保存模块，用于保存Store获取的数据
以下是各个模块实现是代码示例：
HTML页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Extjs示例</title>
<link href="ext-4.2/resources/css/ext-all-gray.css" rel="stylesheet"/>
<link href="resources/css/icon.css" rel="stylesheet"/>
<script src="ext-4.2/ext-all.js"></script>
<script src="ext-4.2/locale/ext-lang-zh_CN.js"></script>
<script src="common.js"></script>
<style type="text/css">
.photo_css1 {
height: 18px;
width: 66px;
cursor: pointer;
}
.photo_css2 {
display: none;
}
</style>
</head>
<body>
</body>
<script>
Ext.application({
name: 'Cnu',
controllers: ['Cnu.controller.CheckSummaryController'],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'CheckSummaryView'
}]
});
}
});
</script>
</html>
Controller.js
Ext.define("Cnu.controller.CheckSummaryController", {
extend: 'Ext.app.Controller',
views: ['demo.CheckSummaryView'],
models: ['demo.CheckSummaryModel'],
stores: ['demo.CheckSummaryStore'],
refs: [
{
ref: 'CheckSummaryView',
selector: 'CheckSummaryView'
}
],
init: function () {
this.control({
'CheckSummaryView button': {
click: this.btnEvent
}
});
}
,
btnEvent: function (selModel) {
var grid = this.getCheckSummaryView();
//var model = grid.getSelectionModel();
if (selModel.iconCls == "icon-query") {//查询
//点击搜索按钮将查询条件传递到后台
// model.clearSelections();//清空所有选择
var jobId = Ext.getCmp('jobId').getValue();
var startTime = Ext.util.Format.date(Ext.getCmp('startTime').getValue(), 'Y-m-d');
var endTime = Ext.util.Format.date(Ext.getCmp('endTime').getValue(), 'Y-m-d');
var deptType = Ext.getCmp('deptType').getValue();
//store 加载之前将参数放进去以待后台获取
grid.store.on('beforeload', function (store, options) {
var new_params = {jobId: jobId, startTime: startTime, endTime: endTime,deptType: deptType};
Ext.apply(store.proxy.extraParams, new_params);
});
grid.store.load();
}
}
});
View.js
Ext.define("Cnu.view.demo.CheckSummaryView", {
extend: 'Ext.grid.Panel',
xtype: 'CheckSummaryView',
store: 'demo.CheckSummaryStore',
initComponent: function () {
//顶部工具栏 查询输入框
this.tbar = [
{
xtype: 'label', text: '工号：'
},
{
xtype: 'textfield', id: 'jobId', emptyText: '请输入工号'
},
{
id:'startTime',
xtype : 'datefield',
//anchor: '100%',
name : 'startTime',
//hiddenName : 'bdate',
fieldLabel : '起始时间:',
format: 'Y-m-d',
allowBlank : false,
listeners: {
change: function () {
var e = Ext.util.Format.date(Ext.getCmp('endTime').getValue(), 'Y-m-d');//格式化日期控件值
var s = Ext.util.Format.date(Ext.getCmp('startTime').getValue(), 'Y-m-d');//格式化日期控件值
var end = new Date(e);
var start = new Date(s);
var today = new Date();
if(start.getTime()>today.getTime()){
Ext.Msg.alert("提示：","不可大于当前时间！");
Ext.getCmp('startTime').setValue(null);
}else if(end.getTime() < start.getTime()) {
Ext.Msg.alert("提示","结束时间必须大于开始时间！");
Ext.getCmp('startTime').setValue(null);
}else if((today.getTime()-start.getTime())/86400000>31){
Ext.Msg.alert("提示：","只能查询最近30天的数据！");
Ext.getCmp('startTime').setValue(null);
}
}
},
value: new Date() // defaults to today
},
//{xtype:'spacer', width:100},
{
id:'endTime',
xtype : 'datefield',
//anchor: '100%',
name : 'endTime',
fieldLabel : '截止时间:',
format: 'Y-m-d',
allowBlank : false,
listeners: {
change: function () {
var e = Ext.util.Format.date(Ext.getCmp('endTime').getValue(), 'Y-m-d');//格式化日期控件值
var s = Ext.util.Format.date(Ext.getCmp('startTime').getValue(), 'Y-m-d');//格式化日期控件值
var end = new Date(e);
var start = new Date(s);
var today = new Date();
if(end.getTime()>today.getTime()){
Ext.Msg.alert("提示：","不可大于当前时间！");
Ext.getCmp('endTime').setValue(null);
}else if(end.getTime() < start.getTime()) {
Ext.Msg.alert("提示","结束时间必须大于开始时间！");
Ext.getCmp('endTime').setValue(null);
}else if((today.getTime()-end.getTime())/86400000>31){
Ext.Msg.alert("提示：","只能查询最近30天的数据！");
Ext.getCmp('endTime').setValue(null);
}
}
},
value: new Date() // defaults to today
},
{
id:'deptType',
xtype: 'combobox',
fieldLabel: '组织结构:',
name: 'deptType',
//hiddenName: 'STRATEGY_TYPE',
store: Ext.create('Ext.data.Store', {
fields: ['DEPARTMENT', 'DEPARTMENT_DESC'],
autoLoad:true,
proxy: {
type: 'rest',
url: rest_prefix+'/checksummary/getDept',
reader: {
type: 'json',
root: 'DATA'
}
}
}),
valueField: 'DEPARTMENT',
displayField: 'DEPARTMENT_DESC',
typeAhead: true,
queryMode: 'local',
editable:false,
allowBlank : false,
triggerAction: 'all',
emptyText: '请选择组织结构...'
},
{
text: '查询',
iconCls: 'icon-query'
}
];
this.columns = [
{
header: '工号',
dataIndex: 'LOGIN_ID',
flex: 1
},
{
header: '姓名',
dataIndex: 'LOGIN_NAME',
flex: 1.2
},
{
header: '签入已签出次数',
dataIndex: 'LOGIN_NUM',
flex: 2
},
{
header: '签入已签出时长（小时）',
dataIndex: 'LOGIN_TIME',
flex: 1.1
}
];
this.callParent(arguments);
},
dockedItems: [
{
xtype: 'pagingtoolbar',
store: 'demo.CheckSummaryStore',
dock: 'bottom',
displayInfo: true
}
]
});
Store.js
Ext.define("Cnu.store.demo.CheckSummaryStore", {
extend: 'Ext.data.Store',
model: 'Cnu.model.demo.CheckSummaryModel',
pageSize: '15',
autoSync: true,
autoLoad: false,
remoteFilter: true,
remoteSort: true,
proxy: {
type: 'rest',
url: rest_prefix + '/checksummary/checksummarylist',
//actionMethods: {
// read: 'POST'
//},
reader: {
type: 'json',
root: 'DATA',
totalProperty: 'totalCount'
},
writer: {
type: 'json'
}
},
/*sorters: [{property: 'CREATE_TIME', direction: 'DESC'}],*/
listeners: {
'beforeload': function (store, op, options) {
/*var params = {
isUse: 0
};
Ext.apply(store.proxy.extraParams, params);*/
}
}
});
Model.js
Ext.define('Cnu.model.demo.CheckSummaryModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'LOGIN_ID'
},
{
name: 'LOGIN_NAME'
},
{
name: 'LOGIN_NUM'
},
{
name: 'LOGIN_TIME'
}
],
idProperty: 'LOGIN_ID'
});
后台代理部分具体实现略
posted on 2016-07-21 17:39 baron_songjin 阅读(970) 评论(0) 收藏 举报
浙公网安备 33010602011771号