学习总结之EXTJS相关了解和问题解决篇
1、通过Ext.data.Record.create的类来创建数据库表中的记录,其中名称的顺序与数据库表中的名称一一对应
通过Ext.data.Store类来定义表格的数据存储器:proxy提供访问地址, reader解析数据
通过Ext.grid.CheckboxSelectionModel 设置多项选择 设置singleSelect : false即可
通过Ext.grid.ColumnModel来创建表格的列信息
通过Ext.form.Hidden 来设置需要隐藏的列信息
通过Ext.form.TextField 创建表单文本框
通过Ext.form.NumberField 创建智能输入数字类型的文本框
通过Ext.form.TextArea 创建文本区域 如备注(填写的区域)
通过Ext.Toolbar 创建工具栏:显示所有控件,如增删改查
通过Ext.form.FormPanel 创建弹出增加,修改页面的的面板
通过Ext.Window 来显示增加 删除页面的窗口
通过Ext.grid.GridPanel类 基于Grid控件的一个面板组件,呈现了Grid的主要交互接口
通过Ext.PagingToolbar 和Ext.data.Store参与绑定并且自动提供翻页控制的工具栏
通过Ext.util.Format.date 将日期类型转换为字符串
2、数据源的定义方式
var store = new Ext.data.Store({ //表格的数据存储器由Ext.data.Store定义
proxy : new Ext.data.HttpProxy({ //proxy提供访问地址
url : 'manage/queryList.action'
}),
reader : new Ext.data.JsonReader({ //reader解析数据
totalProperty : 'count',
root : 'list'
}, MyRecord) //MyRecord为Ext.data.Record.create创建的列信息,被reader解析出来??
});
相关信息可以查EXTJS 的API
3、日期的设置于显示等问题:
[a]、在overWork.js中输入的填报日期: renderer:function(v) { return renderDate(v) } //renderer关健字可以通过一个方法改变当前绑定的数据显示内容,调用renderer方法,返回值V 改变当前值
其中格式化日期的函数为 // 格式化时间输出格式
function renderDate(value) {
if (!value) return "";
//格式化输出时间为"yyyy-mm-dd"
var reDate = /\d{4}\-\d{2}\-\d{2}/gi;
var strDate = value.match(reDate);
if (!strDate) return "";
return strDate;
}
[b]、解决时间字符串中显示 T 间隔的问题:如2013-05-23T10:00:00
使用字符串截取的方式 renderer:function(v){
if(v!=null && v!=""){
var s = v.substring(0,10)+" "+v.substring(11,30)
return s
} }
[c]、EJB的实现类中从数据库中查询24小时制的时间 1) "to_char(t.start_date,'yyyy-mm-dd HH24:mi:ss') start_date,\n" +
2) 时间段查询 >= 和 <=
" WHERE t.IS_USE = 'Y'\n" +
" and to_char(t.start_date,'yyyy-mm-dd HH24:mi:ss') >= '"+signDateS+"' and to_char(t.end_date,'yyyy-mm-dd HH24:mi:ss') <= '"+signDateE+"' "; //signDateS和signDateE是查询条件 注意:此时输入开始时间和结束时间时,默认的是系统当前的时间,而当天结束时间在系统结束时间之后的不能被查询到,因此需要进一步修改 如下面的3) 例:数据库中有一条记录是结束时间时2013-05-23晚上六点的 而 将在下午5点时查询2013-05-23的记录时,显示的结果没有六点的那条记录
3)" WHERE t.IS_USE = 'Y'\n" +
" and to_char(t.start_date,'yyyy-mm-dd HH24:mi:ss') >= '"+signDateS+" 00:00:00' and to_char(t.end_date,'yyyy-mm-dd HH24:mi:ss') <= '"+signDateE+" 23:59:59' "; //调整了当前signDateS为开始时间的第0秒和signDateE为截止到当天最后一秒的时间,因此查询的结果也就是选中的当天整天了 另外 特别注意格式:在signDateS和 00:00:00之间要和其它日期格式对应,中间留有一个空格(若没有注意,可以打断点调试,将sql语句粘贴至pl/sql中进行调试)
[d]、EJB的实体BEAN中类型为Date类型的 有Date 和timestamp类型 @Temporal(TemporalType.TIMESTAMP) //声明时间格式是TIMESTAMP类型的:可以精确到时分秒 而DATE精确到日
[e]、比较 Date.parseDate()与 Ext.util.Format.date()
Date.parseDate是将字符串转为Date:
Date.parseDate('2013-01','Y-m') //结果Mon Jan 28 00:00:00 UTC+0800 2013(Date)
Ext.util.Format.date()是将日期类型转换为字符串
Ext.util.Format.date('2013/1/28 0:00:00','Y-m') //结果是"2013-01"
4、[a]、一些属性 allowBlank: false, //非空
readOnly: true, //只读
autoScroll:true, //自动添加滚动条
[b]、设置监听函数 listeners : {
focus : function() {
WdatePicker({
startDate : '%y-%M-%d',
dateFmt : 'yyyy-MM-dd',
alwaysUseStartDate : true,
onpicked : function() {
//store.load();
}
}); } }
[c]、加带颜色的*号 <font color=red>*</font>
[d]、给弹出的选择框直接赋值: 加属性 value:需要取得的值 如value : new Date().format('Y-m-d') //增加页面显示当天时间
在action中 取值:entity.setLastModifyBy(Long.parseLong((String)session.getAttribute("userCode"))); //获得登录的用户的名
[e]、输入开始时间和结束时间后 在实际时长(结束-开始)中点击后显示计算的时间差的方法,
加上一个监听器 listeners : {
focus : function() {
// var e = Ext.util.Format.date(txtEndDate.getValue(), 'Y-m-d H:m:s');//格式化日期控件值
// var s= Ext.util.Format.date(txtStartDate.getValue(), 'Y-m-d H:m:s');//格式化日期控件值
var date1= txtEndDate.getValue(); // txtEndDate为输入的结束时间
var date2= txtStartDate.getValue(); // txtStartDate为输入的结束时间
var date = new Date();
date1 = Date.parseDate(date1,'Y-m-d h:i:s'); //在时分秒中用i或者m都可以 不过有时只能用i 不然出现计算的时间与当前的时间不匹配 而是系统任意分配的一个时间起点和终点 造成时间相减得不到所需的值
date2 = Date.parseDate(date2,'Y-m-d h:i:s');
// alert("当前结束时间:"+date1);
// alert("当前开始时间:"+date2);
// alert(date1.getTime());
// alert((date1-date2)/1000/60/60);//除以1000毫秒,60秒,60分,剩下的就是小时
txtFactHour.setValue(parseInt((date1-date2)/1000/60/60)) ////除以1000毫秒,60秒,60分,剩下的就是小时
// Ext.MessageBox.alert(txtFactHour.getValue());
}
}
[f]、在列表中显示取得时间的几种方式
1) value : new Date().add(Date.DAY, -60).format('Y-m-d'), //起始时间设置:取得系统当前时间 减去60天后的时间 显示的格式为 年-月-日
//同样可以显示 时分秒:('Y-m-d H:m:s') 或者('Y-m-d H:i:s')
2) value : new Date().getFullYear().toString(10)+'-01-01', //固定取得的起始日期
3) value : new Date().add(Date.YEAR, +1).format('Y-m-d'), //取得当前年+1年的时间 使用add(Date.TEAR,+1)
[g]、分页处理 store.load({ //并从数据库中读出来 load一下
params : {
start : 0,
limit : 18 }
});
然后在gridPanel中的底部工具条中显示分页信息
bbar : new Ext.PagingToolbar({ //PagingToolbar:一个要和Ext.data.Store参与绑定并且自动提供翻页控制的工具栏
pageSize : 18, //每页显示的数据数目
store : store,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg : "没有记录"
})
EJB中分页限制 query.setFirstResult(Integer.parseInt(start));//分页限制
query.setMaxResults(Integer.parseInt(limit));
[h]、grid.on('rowdblclick', change); //双击选中后调用change函数 rowclick单击