/**
* Title: ExtJs
* 首页
* Description: 基础demo组合查询+列表展示
*
* Copyright: Copyright (c) 2011
*
* Company:
*
* @author 程仁银 id:23949
* @version V1.0 2011-7-13
* @since
*/
Ext.namespace('ECC.demo');
// ___________________________________________________________________________
// | |
// | 查询条件 |
// | ECC.demo.BaseQueryForm |
// | |
// | |
// |___________________________________________________________________________|
// | |
// | |
// | |
// | |
// | |
// | |
// | 查询列表 |
// | ECC.demo.BaseGridPanel |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// |___________________________________________________________________________|
/**
* @name ECC.demo.basePanelFrame
* @author 程仁银
* @description basepanel
*/
ECC.demo.basePanelFrame = function(){
this.formpanel = new ECC.demo.BaseQueryForm(); //定义查询面板为当前对象引用变量
this.gridpanel = new ECC.demo.BaseGridPanel(); //定义列表面板为当前对象引用变量
/**
* 构造函数
*/
ECC.demo.basePanelFrame.superclass.constructor.call(this,{
id : "basePanelFrameId",
name : "basePanelFrameName",
autoWidth : true,
border : false,
layout : 'form',
items :[this.formpanel,this.gridpanel]
});
}
/**
*
* @class ECC.demo.basePanelFrame
* @extends Ext.Panel
*/
Ext.extend(ECC.demo.basePanelFrame,Ext.Panel,{});
/**
* Title: 基础简单查询面板
*
* Description: 基础demo组合查询
*
*
* Company:
*
* @author 程仁银
* @version V1.0 2011-7-11
* @since
*/
Ext.namespace('ECC.demo');
// ___________________________________________________________________________
// | |
// | 查询条件 |
// | ECC.demo.BaseQueryForm |
// | |
// | |
// |___________________________________________________________________________|
/**
* 查询条件的formpanel
*
* @param gridPanel-后续扩展
*/
ECC.demo.BaseQueryForm = function(){
var baseQueryForm = this; //定义当前变量为引用变量
/**
* 设置gridpanel为当前类引用
* store 动态加载列表
*/
// this.baseGridPanel = new ECC.demo.BaseGridPanel();
/**
* 构造方法
*/
ECC.demo.BaseQueryForm.superclass.constructor.call(this,{
id : 'formId',
title : 'ECC 培训 form and grid - demo',
name : 'baseQueryForm',
frame : true,
autoWidth : true,
autoHeight : true,
border : false,
layout : 'form', // 整体以form布局,每一行,用单独的column布局
items : [
{
layout : 'column', // 第一行布局采用 column
items : [
{
columnWidth : .3,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
xtype : 'textfield',
id : 'eventTitleId',
fieldLabel : '事件标题',
name : 'eventTitle',
allowBlank : false,
anchor : '95%',
invalidText : '事件标题不能为空',
blankText : '请填写事件标题'
}
]
},
/**
* 两种时间控件 Ext.form.TimeField
* Ext.form.DateField
*/
{
columnWidth : .3,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
xtype : 'datefield',
fieldLabel : '开始时间',
name : 'startTime',
format : 'Y-m-d',
anchor : '95%'
}
]
},
{
columnWidth : .3,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
xtype : 'timefield',
fieldLabel : '结束时间',
name : 'endTime',
increment: 30, // 设置步长
anchor : '95%'
}
]
},
/*
* 按钮的三种类型(submit、reset、button
*/
{
columnWidth : .1,
layout : 'form',
labelAlign : 'right',
labelWidth : 60,
items : [
{
/**
* 参考 Ext.Component 的 xtype -> class
*/
xtype : 'button',
name : 'searchBtn',
text : '查询',
/**
* 添加提交触发事件
* 区分按钮响应区别
* listeners、handler
* 1、handler是一个特殊的listener;
* 2、handler是一个函数,而listener是<event , 函数>对;
*/
listeners : {
'click' : function(){
if(baseQueryForm.getForm().isValid()){
alert(Ext.getCmp('eventTitleId').getValue());
}else{
// alert(ECC.demo.states);
Ext.Msg.show({
title : 'Ext.Msg.show',
msg : '表单验证未通过',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
}
}
/*
* handler : function (){
Ext.Msg.show({
title : 'Ext.Msg.show',
msg : '表单验证未通过',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}*/
}
]
}
]
},
/**
* 第二行 fieldset ,组合查询-高级查询
* 参考ext官方 example(基于修改)
*/
{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true, //True表示为面板是可收缩的
collapsed: false, //True 表示为渲染面板后即闭合
// 默认 闭合状态,样式会乱掉,未解决......
autoHeight:true,
labelWidth : 50,
layout : 'column',
items :[
{
columnWidth : .3,
layout : 'form',
items : [
{
/**
* Ext.form.NumberField = Ext.extend(Ext.form.TextField....
*/
xtype : 'numberfield',
fieldLabel: 'NumberField',
labelWidth : 60,
name: 'NumberField',
invalidText : '输入数字',
emptyText : '只能输入数字'
}]
},
{
columnWidth : .3,
layout : 'form',
items : [
{
xtype : 'textfield',
/**
* url、alpha、alphanum、email
*/
vtype : 'email', //默认验证:参考 Ext.form.VTypes
fieldLabel : 'Email',
name : 'email',
vtypeText : '格式如:chengyu@qq.com' //制定一个错误信息代替默认的
}
]
},
/**
* Ext.form.ComboBox 使用
* The combo box can use any type of Ext.data.Store as its data source.
* This means your data can be XML, JSON, arrays or any other supported format.
* It can be loaded using Ajax, via script tags or locally.
* This combo uses local data from a JS array:
*/
{
columnWidth : .3,
layout : 'form',
items : [
{ // simple array store
xtype : 'combo', // 下拉列表demo
fieldLabel : 'ComboxBox',
/**
* 参考:E:\开发资料\Ext\ext-3.0.0\ext-3.0.0\examples\form\combos.html
* Ext.data.Store :JsonStore,ArrayStore,XmlStore
* Ext.data.DataProxy : HttpProxy,MemoryProxy,ScriptTagProxy,DirectProxy
* Ext.data.DataReader : JsonReader,ArrayReader,XmlReader
*/
/*
* ExtJs 2.2
* use Ext.data.SimpleStore
*/
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data: ECC.demo.states
}),
/*
* ExtJs 3.3
* store : new Ext.data.ArrayStore({
proxy : new Ext.data.MemoryProxy(),
reader : new Ext.data.ArrayReader(
{},
new Ext.data.Record.create([
{name: 'abbr',mapping : 1},
{name: 'state',mapping : 2}
])
),
autoLoad : true,
data : ECC.demo.states
}),*/
displayField : 'state',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : 'Select a state...',
selectOnFocus : true
}
]
}
]
},
/**
* 第3行布局采用 column
* fieldset checkbox 模式
* 参考ext官方example
*/
{
xtype:'fieldset',
checkboxToggle:true, //checkbox 模式
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true, //True 表示为渲染面板后即闭合
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
}
]
});
}
/**
*
* @class ECC.demo.BaseQueryForm
* @extends Ext.form.FormPanel
*/
Ext.extend(ECC.demo.BaseQueryForm,Ext.FormPanel,{});
/**
* Title: 基础列表面板
*
* Description: 显示查询列表信息
*
* Company:
*
* @author 程仁银
* @version V1.0 2011-7-13
* @since
*/
Ext.namespace('ECC.demo');
// ___________________________________________________________________________
// | |
// | |
// | |
// | |
// | |
// | |
// | 查询列表 |
// | ECC.demo.BaseGridPanel |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// |___________________________________________________________________________|
/**
* 显示查询列表信息
*
* @param {}
*/
ECC.demo.BaseGridPanel = function(){
var baseGridPanel = this; //定义当前变量为引用变量
/**
* gridpanel Config Options
*/
this.sm = new Ext.grid.CheckboxSelectionModel({
singleSelect : false
});
/**
* 定义表格列模式
*/
this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //显示行号
this.sm, //将多选框加入至表格行头
{
id : 'abbr',
header : '姓名',
dataIndex : 'abbr'
},
{
id : 'state',
header : '描述',
dataIndex : 'state'
}
]);
/**
* 定义数据对象
*/
this.record = new Ext.data.Record.create([
{name:'abbr'},
{name:'state'}
]);
/**
* 本地数据读取,采用
* Ext2.2 Ext.data.SimpleStore
* 后续可以使用 ExtJs 3.3 响应 store
* 本地数据读取,未牵扯到 datareader、dataproxy
*/
// this.store = new Ext.data.SimpleStore({
// fields : ['abbr', 'state'],
// data : ECC.demo.states
// });
this.store = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(ECC.demo.states),
reader: new Ext.data.ArrayReader({},
this.record)
});
/**
* 构造函数
*/
ECC.demo.BaseGridPanel.superclass.constructor.call(this,{
id : 'gridId',
name : 'BaseGridPanelName',
autoWidth : true,
height : 265,
border : false,
loadMask : { //加载数据时增加用户体验的云遮功能
msg : '加载数据 ing ...'
},
enableColumnMove : false, //关闭列的拖动功能
enableColumnResize : false, //关闭列的大小调节功能
enableHdMenu : false, //关闭列头部出现的下拉按钮
viewConfig : {
forceFit : true
},
cm : this.cm,
sm : this.sm,
store : this.store,
/**
* 定义分页栏
*/
bbar : new Ext.PagingToolbar({
pageSize : 10,
store: this.store,
displayInfo: true
})
});
/**
* store 加载分页
*/
this.store.load(
{
params:{
start : 0,
limit : 10
}
});
}
/**
*
* @class ECC.demo.BaseGridPanel
* @extends Ext.grid.GridPanel
*/
Ext.extend(ECC.demo.BaseGridPanel,Ext.grid.GridPanel,{});
/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/* Fix for Opera, which does not seem to include the map function on Array's */
if(!Array.prototype.map){
Array.prototype.map = function(fun){
var len = this.length;
if(typeof fun != "function"){
throw new TypeError();
}
var res = new Array(len);
var thisp = arguments[1];
for(var i = 0; i < len; i++){
if(i in this){
res[i] = fun.call(thisp, this[i], i, this);
}
}
return res;
};
}
/* Paging Memory Proxy, allows to use paging grid with in memory dataset */
Ext.data.PagingMemoryProxy = function(data) {
Ext.data.PagingMemoryProxy.superclass.constructor.call(this);
this.data = data;
};
Ext.extend(Ext.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
load : function(params, reader, callback, scope, arg) {
params = params || {};
var result;
try {
result = reader.readRecords(this.data);
}catch(e){
this.fireEvent("loadexception", this, arg, null, e);
callback.call(scope, null, arg, false);
return;
}
// filtering
if (params.filter!==undefined) {
result.records = result.records.filter(function(el){
if (typeof(el)=="object"){
var att = params.filterCol || 0;
return String(el.data[att]).match(params.filter)?true:false;
} else {
return String(el).match(params.filter)?true:false;
}
});
result.totalRecords = result.records.length;
}
// sorting
if (params.sort!==undefined) {
// use integer as params.sort to specify column, since arrays are not named
// params.sort=0; would also match a array without columns
var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
var fn = function(r1, r2){
return r1 < r2;
};
result.records.sort(function(a, b) {
var v = 0;
if (typeof(a)=="object"){
v = fn(a.data[params.sort], b.data[params.sort]) * dir;
} else {
v = fn(a, b) * dir;
}
if (v==0) {
v = (a.index < b.index ? -1 : 1);
}
return v;
});
}
// paging (use undefined cause start can also be 0 (thus false))
if (params.start!==undefined && params.limit!==undefined) {
result.records = result.records.slice(params.start, params.start+params.limit);
}
callback.call(scope, result, arg, true);
}
});
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
// some data used in the examples
Ext.namespace('ECC.demo');
ECC.demo.states = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
];
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>My JSP 'ExtHello.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/ext-2.2/resources/css/ext-all.css">
<script type="text/javascript" src="<%=path %>/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path %>/ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="<%=path %>/ext-2.2/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/eccBaseForm.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/states.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/baseGridPanel.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/eccDemoFrame.js"></script>
<script type="text/javascript" src="<%=path %>/ExtJsDemo/PagingMemoryProxy.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
/**
* eccBaseForm demo
*/
//var baseQueryForm = new ECC.demo.BaseQueryForm();
//baseQueryForm.render('div1');
/**
* eccBaseForm demo
*/
//var baseGridPanel = new ECC.demo.BaseGridPanel();
//baseGridPanel.render('div1');
var panelFrame = new ECC.demo.basePanelFrame();
panelFrame.render('div1');
});
--></script>
</head>
<body>
<div id="div1" align="center"></div>
</body>
</html>
分享到:
相关推荐
内容概要:本文详细介绍了基于MATLAB GUI界面和卷积神经网络(CNN)的模糊车牌识别系统。该系统旨在解决现实中车牌因模糊不清导致识别困难的问题。文中阐述了整个流程的关键步骤,包括图像的模糊还原、灰度化、阈值化、边缘检测、孔洞填充、形态学操作、滤波操作、车牌定位、字符分割以及最终的字符识别。通过使用维纳滤波或最小二乘法约束滤波进行模糊还原,再利用CNN的强大特征提取能力完成字符分类。此外,还特别强调了MATLAB GUI界面的设计,使得用户能直观便捷地操作整个系统。 适合人群:对图像处理和深度学习感兴趣的科研人员、高校学生及从事相关领域的工程师。 使用场景及目标:适用于交通管理、智能停车场等领域,用于提升车牌识别的准确性和效率,特别是在面对模糊车牌时的表现。 其他说明:文中提供了部分关键代码片段作为参考,并对实验结果进行了详细的分析,展示了系统在不同环境下的表现情况及其潜在的应用前景。
嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip
嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip
内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。
少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
内容概要:本文详细介绍了基于PID控制器的四象限直流电机速度驱动控制系统仿真模型及其永磁直流电机(PMDC)转速控制模型。首先阐述了PID控制器的工作原理,即通过对系统误差的比例、积分和微分运算来调整电机的驱动信号,从而实现转速的精确控制。接着讨论了如何利用PID控制器使有刷PMDC电机在四个象限中精确跟踪参考速度,并展示了仿真模型在应对快速负载扰动时的有效性和稳定性。最后,提供了Simulink仿真模型和详细的Word模型说明文档,帮助读者理解和调整PID控制器参数,以达到最佳控制效果。 适合人群:从事电力电子与电机控制领域的研究人员和技术人员,尤其是对四象限直流电机速度驱动控制系统感兴趣的读者。 使用场景及目标:适用于需要深入了解和掌握四象限直流电机速度驱动控制系统设计与实现的研究人员和技术人员。目标是在实际项目中能够运用PID控制器实现电机转速的精确控制,并提高系统的稳定性和抗干扰能力。 其他说明:文中引用了多篇相关领域的权威文献,确保了理论依据的可靠性和实用性。此外,提供的Simulink模型和Word文档有助于读者更好地理解和实践所介绍的内容。
嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip
少儿编程scratch项目源代码文件案例素材-驾驶通关.zip
小区开放对周边道路通行能力影响的研究.pdf
内容概要:本文探讨了冷链物流车辆路径优化问题,特别是如何通过NSGA-2遗传算法和软硬时间窗策略来实现高效、环保和高客户满意度的路径规划。文中介绍了冷链物流的特点及其重要性,提出了软时间窗概念,允许一定的配送时间弹性,同时考虑碳排放成本,以达到绿色物流的目的。此外,还讨论了如何将客户满意度作为路径优化的重要评价标准之一。最后,通过一段简化的Python代码展示了遗传算法的应用。 适合人群:从事物流管理、冷链物流运营的专业人士,以及对遗传算法和路径优化感兴趣的科研人员和技术开发者。 使用场景及目标:适用于冷链物流企业,旨在优化配送路线,降低运营成本,减少碳排放,提升客户满意度。目标是帮助企业实现绿色、高效的物流配送系统。 其他说明:文中提供的代码仅为示意,实际应用需根据具体情况调整参数设置和模型构建。
少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip
内容概要:本文详细介绍了基于STM32F030的无刷电机控制方案,重点在于高压FOC(磁场定向控制)技术和滑膜无感FOC的应用。该方案实现了过载、过欠压、堵转等多种保护机制,并提供了完整的源码、原理图和PCB设计。文中展示了关键代码片段,如滑膜观测器和电流环处理,以及保护机制的具体实现方法。此外,还提到了方案的移植要点和实际测试效果,确保系统的稳定性和高效性。 适合人群:嵌入式系统开发者、电机控制系统工程师、硬件工程师。 使用场景及目标:适用于需要高性能无刷电机控制的应用场景,如工业自动化设备、无人机、电动工具等。目标是提供一种成熟的、经过验证的无刷电机控制方案,帮助开发者快速实现并优化电机控制性能。 其他说明:提供的资料包括详细的原理图、PCB设计文件、源码及测试视频,方便开发者进行学习和应用。
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip
Android系统开发_Linux内核配置_USB-HID设备模拟_通过root权限将Android设备转换为全功能USB键盘的项目实现_该项目需要内核支持configFS文件系统
C# WPF - LiveCharts Project
少儿编程scratch项目源代码文件案例素材-恐怖叉子 动画.zip
嵌入式八股文面试题库资料知识宝典-嵌⼊式⼯程师⾯试⾼频问题.zip