学习总结之ExtJs的相关了解和问题解决篇

Posted 周二, 07/02/2013 - 12:31 by admin

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]、加带颜色的*号 *
[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单击