学习总结之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单击

posted @ 2013-05-24 11:24  空杯V  阅读(1293)  评论(1编辑  收藏  举报