zoukankan      html  css  js  c++  java
  • 学习总结之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单击

  • 相关阅读:
    java io系列23之 BufferedReader(字符缓冲输入流)
    java io系列22之 FileReader和FileWriter
    java io系列21之 InputStreamReader和OutputStreamWriter
    java io系列20之 PipedReader和PipedWriter
    java io系列19之 CharArrayWriter(字符数组输出流)
    java io系列18之 CharArrayReader(字符数组输入流)
    java io系列17之 System.out.println("hello world")原理
    java io系列16之 PrintStream(打印输出流)详解
    java io系列15之 DataOutputStream(数据输出流)的认知、源码和示例
    java io系列14之 DataInputStream(数据输入流)的认知、源码和示例
  • 原文地址:https://www.cnblogs.com/kongbeiV/p/3096460.html
Copyright © 2011-2022 走看看