BlogJava-海水正蓝-随笔分类-Ext

让Extjs EditorGridPanel 编辑时支持方向键

小胡子 — Tue, 27 Aug 2013 05:10:00 GMT

在用 extjs editorgridpanel 进行输入编辑的时候, 默认情况下只支持使用 tab 键可以实现焦点切换, 如果想让editorgridpanel 在编辑时通过方向键来实现焦点跳转切换，只需加上以下代码：

//让grid支持方向键盘 by liongis@163.com
Ext.override(Ext.grid.CellSelectionModel, {
    onEditorKey : function(field, e) {
        var smodel = this;
        var k = e.getKey(), newCell, g = smodel.grid, ed = g.activeEditor;
        switch(k){
            case e.TAB:
                 e.stopEvent();
                 ed.completeEdit();
                 if (e.shiftKey) {
                     newCell = g.walkCells(ed.row, ed.col-1, -1, smodel.acceptsNav, smodel);
                 } else {
                     newCell = g.walkCells(ed.row, ed.col+1, 1, smodel.acceptsNav, smodel);
                 }
                 if (ed.col == 1) {
                     if (e.shiftKey) {
                         newCell = g.walkCells(ed.row, ed.col+1, -1, smodel.acceptsNav, smodel);
                     } else {
                         newCell = g.walkCells(ed.row, ed.col+1, 1, smodel.acceptsNav, smodel);
                     }
                 }
                break;
            case e.UP:
                 e.stopEvent();
                 ed.completeEdit();
                 newCell = g.walkCells(ed.row-1, ed.col, -1, smodel.acceptsNav, smodel);
                break;
            case e.DOWN:
                 e.stopEvent();
                 ed.completeEdit();
                 newCell = g.walkCells(ed.row+1, ed.col, 1, smodel.acceptsNav, smodel);
                break;
            case e.LEFT:
                 e.stopEvent();
                 ed.completeEdit();
                 newCell = g.walkCells(ed.row, ed.col-1, -1, smodel.acceptsNav, smodel);
                 break;
             case e.RIGHT:
                 e.stopEvent();
                 ed.completeEdit();
                 newCell = g.walkCells(ed.row, ed.col+1, 1, smodel.acceptsNav, smodel);
                   break;
        }
       if (newCell) {
            g.startEditing(newCell[0], newCell[1]);
       }
     }
});

注意：这里重写的是：CellSelectionModel ，而不是RowSelectionMode

原文出自：

http://www.cnblogs.com/liongis/p/3284620.html

小胡子 2013-08-27 13:10 发表评论

提高EXT js的加载速度的方法

小胡子 — Tue, 13 Aug 2013 08:48:00 GMT

我们知道，EXT的全部js是比较大的，一个ext-all-debug.js就达2m多，它的压缩版（去掉js中的换行及空格），也达600多k,这对于在网速不太快的时，下载js就得漫长的等待。
JOffice中的日历任务控件，js多达四五个，每个js大小都达70多k,尽管我们采用了后加载的方式，则当用户点击我的任务功能时，才下载该js，但这样仍然很慢，因为下载的js很慢
，鉴于此，在互联网上使用类似Joffice类似的程序，速度会使很多开发商不敢选用ext作为开发技术。据本人当时参与移动一个内部采购平台的开发，就是因为其运行程序慢，遭到移动的终端用户的弃骂，
所以，要想用EXT来开发应用，需要解决其运行慢的特点。

我们可以从以下几种方法来提高应用程序的运行速度：

一.前期尽量少加载js.

这点在Joffice中有比较好的运用，采用的是由ScriptMgr.load方法来完成，加载完成后，其会在body中插入一个div,只要当前页面不被刷新，下次再访问该功能时，不需要再加载js

   function $ImportJs(viewName,callback) {
    var b = document.getElementById(viewName+'-hiden');
    if (b != null) {
        var view = eval('new ' + viewName + '()');
        callback.call(this, view);
    } else {
        var jsArr = eval('App.importJs.' + viewName);
        if(jsArr==undefined){
            var view = eval('new ' + viewName + '()');
            callback.call(this, view);
            return ;
        }
        ScriptMgr.load({
                    scripts : jsArr,
                    callback : function() {

                        Ext.DomHelper.append(document.body,""
                                                + viewName
                                                + "-hiden' style='display:none'>

");
                        var view = eval('new ' + viewName + '()');
                        callback.call(this, view);
                    }
        });
    }
}

    package com.htsoft.core.web.filter;
        import java.io.IOException;
        import java.util.HashMap;
        import java.util.Iterator;
        import java.util.Map;
        import javax.servlet.Filter;
        import javax.servlet.FilterChain;
        import javax.servlet.FilterConfig;
        import javax.servlet.ServletException;
        import javax.servlet.ServletRequest;
        import javax.servlet.ServletResponse;
        import javax.servlet.http.HttpServletRequest;
        import javax.servlet.http.HttpServletResponse;

        public class GzipJsFilter implements Filter {
            Map headers = new HashMap();
            public void destroy() {
            }
            public void doFilter(ServletRequest req, ServletResponse res,
                    FilterChain chain) throws IOException, ServletException {
                if(req instanceof HttpServletRequest) {
                    doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);
                }else {
                    chain.doFilter(req, res);
                }
            }
            public void doFilter(HttpServletRequest request,
                    HttpServletResponse response, FilterChain chain)
                    throws IOException, ServletException {
                    request.setCharacterEncoding("UTF-8");
                    for(Iterator it = headers.entrySet().iterator();it.hasNext();) {
                        Map.Entry entry = (Map.Entry)it.next();
                        response.addHeader((String)entry.getKey(),(String)entry.getValue());
                    }
                    chain.doFilter(request, response);
            }

            public void init(FilterConfig config) throws ServletException {
                String headersStr = config.getInitParameter("headers");
                String[] headers = headersStr.split(",");
                for(int i = 0; i < headers.length; i++) {
                    String[] temp = headers[i].split("=");
                    this.headers.put(temp[0].trim(), temp[1].trim());
                }
            }
        }

3.在WEB.xml 文件中，添加以下配置：

<filter>
    <filter-name>GzipJsFilterfilter-name>
    <filter-class>com.htsoft.core.web.filter.GzipJsFilterfilter-class>
    <init-param>
        <param-name>headersparam-name>
        <param-value>Content-Encoding=gzipparam-value>
    init-param>
filter>
<filter-mapping>
<filter-name>GzipJsFilterfilter-name>
<url-pattern>*.gzjsurl-pattern>
lt;/filter-mapping>
<servlet-mapping>

4.在index.jsp中引入该压缩文件：

可以看到浏览器解压后，其代码是一样的：

大家可以看到以上，这块是在外网使用的，其速度是比较快的。当然，浏览器解压这个文件需要一点时间，不过在本地解压是非常快的，可以不用管。

三、通过Js缓存，更加可以提高ＥＸＴ的加载速度，关于缓存，本文不作讨论。

原文出自：

http://man1900.iteye.com/blog/515058

小胡子 2013-08-13 16:48 发表评论

[转]Ext GridPanel根据条件显示复选框

小胡子 — Mon, 06 May 2013 07:34:00 GMT

Ext GridPanel实现复选框选择框:

1 var selectModel = new Ext.grid.CheckboxSelectionModel({
2 singleSelect : false
3 });
4

但是这样每一行都会有复选框,如果需求为:某行数据的某个列满足什么条件我才有复选框选项就不太好实现了,

这样就需要重写Ext.grid.CheckboxSelectionModel的渲染,行点击涵数来实现.

1 var selectModel = new Ext.grid.CheckboxSelectionModel({
2       singleSelect : false,
3       renderer : function(v, p, record){
4           if (record.data['结果状态'] == '0'){
5                return '';
6           }
7           return '<div class="x-grid3-row-checker"> div>';
8       },
9       onHdMouseDown : function(e, t) {
10           if (t.className == 'x-grid3-hd-checker') {
11                e.stopEvent();
12                var hd = Ext.fly(t.parentNode);
13                var isChecked = hd.hasClass('x-grid3-hd-checker-on');
14                if (isChecked){
15                   hd.removeClass('x-grid3-hd-checker-on');
16                   this.clearSelections();
17               }else {
18                   hd.addClass('x-grid3-hd-checker-on');
19                   if (this.locked){
20                       return;
21                   }
22                   this.selections.clear();
23                   for (var i = 0, len = this.grid.store.getCount(); i < len; i++ ){
24                       if (this.grid.store.getAt(i).data["结果状态"] != '0'){
25                            this.selectRow(i, true);
26                       }
27                  }
28               }
29          }
30       },
31       handleMouseDown : function(g, rowIndex, e){
32             if (e.button !== 0 || this.isLocked()) {
33                    return;
34             }
35             var view = this.grid.getView();
36             if (e.shiftKey && !this.singleSelect && this.last != false ) {
37                  var last = this.last;
38                  this.selectRange(last, rowIndex, e.ctrlKey);
39                  this.last = last;
40                  view.focusRow(rowIndex);
41             }else{
42                  var isSelected = this.isSelected(rowIndex);
43                  if (e.ctrlKey && isSelected) {
44                       this.deselectRow(rowIndex);
45                  }else if(!isSelected || this.getCount() > 1){
46                       if(this.grid.store.getAt(rowIndex).data["结果状态"] != '0'){
47                           this.selectRow(rowIndex, e.ctrlKey || e.shiftKey);
48                       }
49                       view.focusRow(rowIndex);
50                  }
51             }
52       }
53 });

原文:

http://fordream.iteye.com/blog/1179252

小胡子 2013-05-06 15:34 发表评论

[转]EXT EditorGridPanel 中用复选框表示真假值,扩展官方示例

小胡子 — Mon, 06 May 2013 07:32:00 GMT

摘要: 在学习中Ext.grid.EditorGridPanel 的时候碰到一个知识点,如何用复选框来表示真假值,当然我们可以直接这样 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1 {2 heade... 阅读全文

小胡子 2013-05-06 15:32 发表评论

【转】Ext.grid.GridPanel隔行显示不同的背景颜色

小胡子 — Sat, 04 May 2013 13:33:00 GMT

Ext.grid.GridPanel可以设置stripeRows: true的属性来实现隔行换颜色的效果，如果你想自定义每行的颜色，那么你可以按照下边地方法来实现：

Ext.ux.GridView=Ext.extend(
       Ext.grid.GridView,
       {
           getRowClass:function(record,index)
           {
               if(index%2==0)
                   return 'red';
               else
                  return 'green';
          }
       }
   )

使用自定义的view

var grid = new Ext.grid.GridPanel({
        //other code
    store: store,
    view:new Ext.ux.GridView(),
        //other code
});

样式定义：

.red {
background-color:#FF0000;
}
.green {
background-color:#00FF00;
}

通过firebug可以看到，给每行的div添加了自定义的样式

原文出自：

http://love4j.iteye.com/blog/516007

小胡子 2013-05-04 21:33 发表评论

【转】Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)

小胡子 — Mon, 29 Apr 2013 03:56:00 GMT

摘要: 先上图 grid分页：把grid和page工具绑定在一起 // create the Data Store var store = new Ext.data.Store... 阅读全文

小胡子 2013-04-29 11:56 发表评论

ExtJS 2.2,图书管理系统共享全部源码下载

小胡子 — Mon, 29 Apr 2013 03:53:00 GMT

http://yourgame.iteye.com/blog/252853

小胡子 2013-04-29 11:53 发表评论

[转]Ext combobox 动态模糊匹配

小胡子 — Mon, 29 Apr 2013 03:33:00 GMT

Ext中的combobox有属性typeAhead：true 可以实现模糊匹配，但是是从开始匹配的，如果需要自定的的匹配，则需要监听beforequery方法，实现自己的匹配查询方法：

代码如下：

原文出自：http://weibaojun.iteye.com/blog/1098731

小胡子 2013-04-29 11:33 发表评论

【转】ExtJS练习——ComboBox的四种扩展

小胡子 — Sat, 02 Mar 2013 13:48:00 GMT

摘要: 摘要：ComboBox是常用控件之一，但由于其数据来源分两种形式：本地和远程，故写的形式难度并不亚于ExtJS中的TreePanel和 GridPanel。鄙人也经常提醒自己的师弟师妹，ExtJS本身是面向对象写的，不能在应用的时候却不按照面向对象来写，面向对象最起码的好处就是代码的复用，对于网页来讲，代码复用的好处就是加载的JS会少很多，这样网页渲染时就不会很慢。下面我将分别介绍扩展的四种Co... 阅读全文

小胡子 2013-03-02 21:48 发表评论

【转】Ext Combox 分页

小胡子 — Sat, 02 Mar 2013 13:43:00 GMT

首先定义一数据源，一般使用simpleStore，jsonStore。需要注意的是simpleStore用于读取二维数组的数据，而jsonStroe用于读取json数据格式。
Combox使用simpleStore 代码如下所示：

var subjectField = new Ext.form.ComboBox({
     fieldLabel : '分类名称',
hiddenName : 'drug.subjectCode',// 传递到后台的参数
store : new Ext.data.SimpleStore({
autoLoad : true,
url :'xxx',
fields : ['subjectCode', 'subjectName']
}),
   valueField : 'subjectCode',// 域的值,对应于store里的fields
   displayField : 'subjectName',// 显示的域,对应于store里的fields
   typeAhead : true,// 设置true，完成自动提示
   mode : 'local', // 设置local，combox将从本地加载数据
   triggerAction : 'all',// 触发此表单域时,查询所有
   selectOnFocus : true,
   anchor : '90%',
   forceSelection : true
   });

服务端返回的数据结构如下所示：
[
["00000003","硬膏剂"],
["00000005","滴眼剂"],
["00000016","栓剂"],
["00000017","注射剂"],
["00000018","软膏剂"]
]

当combox使用jsonStore时，一般运用于分页查询。页面效果如下所示：

示例代码如下所示：
// 药品商品名

var itemNameField = new Ext.form.ComboBox({
    width : 200,
    fieldLabel : '药品商品名',
    hiddenName : 'drug.itemName',
    store : advanceStore,
    valueField : 'itemName',
    displayField : 'itemName',
    typeAhead : true,
    mode : 'remote',// 分页查询必须设置为    remote,当我们点击下一页的时候是从服务端取数据，而不是本地
    triggerAction : 'all',
    emptyText : '请选择一个分类名',
    selectOnFocus : true,
    minChars : 0, // 完成自动提示,当mode为‘local’时,默认为0,当mode为‘remote’时候,默认为4,这里设置为0
    pageSize : 10,// 每页显示的记录数字
    queryParam :'drug.itemName' // 在combox内敲入字符时候，combox向后台查询传递的参数,这里设置为'drug.itemName'是为了更好的封装，默认传递参数‘query’
    });

这里还有一个问题，就是Combox设置初始值。
我是采用如下做法的，不知道各位知不知道其他用法？

var subjectField = new Ext.form.ComboBox({
   fieldLabel : '分类名称',
   hiddenName : 'drug.subjectCode',
   store : new Ext.data.SimpleStore({
   autoLoad : true,
   url : 'xxx',
   fields : ['subjectCode', 'subjectName'],
   listeners : {
      load : function(){         subjectField.setValue(record.get("drug.subjectCode"));
   }
   }
   }),
   valueField : 'subjectCode',
   displayField : 'subjectName',
   typeAhead : true,
   mode : 'local',
   triggerAction : 'all',
   emptyText : '请选择一个分类名',
   selectOnFocus : true,
   anchor : '90%',
   forceSelection : true
   });

原文出自：

http://www.iteye.com/topic/296710

小胡子 2013-03-02 21:43 发表评论

Ext EditorGridPanel 指定单元格不可编辑

小胡子 — Thu, 21 Feb 2013 08:10:00 GMT

两种方法一样，只是写法不同
第一种写法

1 listeners:{
2         beforeedit:function(e){
3             if(...) e.cancel = true;//true表示不可编辑
4         }
5 }

第二种写法

1 grid.on('beforeedit',function(e)){
2   var record = e.record;
3   if(...){
4     e.cancel = true;//true表示不可编辑
5   }
6 }

小胡子 2013-02-21 16:10 发表评论

Ext 不分组合计

小胡子 — Thu, 21 Feb 2013 07:51:00 GMT

1.首先看效果

2.需要一个合计插件GridSummary.js GridSummary 插件，下载后将后缀名该为 js
3.页面需要引用的文件

1     <link rel="stylesheet" type="text/css" href="include/ext-3.4.0/resources/css/ext-all.css" />
2     <link rel="stylesheet" type="text/css" href="include/ext-3.4.0/ux/css/ux-all.css" />
3     <script type="text/javascript" src="include/ext-3.4.0/adapter/ext/ext-base.js">script>
4     <script type="text/javascript" src="include/ext-3.4.0/ext-all.js">script>
5     <script type="text/javascript" src="include/ext-3.4.0/ux/ux-all.js">script>
6     <script type="text/javascript" src="include/ext-3.4.0/locale/ext-lang-zh_CN.js">script>
7     <script type="text/javascript" src="include/ext-3.4.0/ux/GridSummary.js">script>

8 <script type="text/javascript" src="demo.js">script>

4.Grid代码

    var cm = new Ext.grid.ColumnModel
    ({ columns: [sm,
        new Ext.grid.RowNumberer({ header: 'NO', width: 30, align: 'center' }),
        { header: '车号', dataIndex: 'S_VEHICLE_NUMBER', editor: textFileldVehicle, summaryRenderer: function (v, params, data) { return '合计'; } },
       { header: '重量', dataIndex: 'N_QUANTITY', summaryType: 'sum', renderer: formatNumberDefault, align: 'right', editor: numField },
       { header: '运费', dataIndex: 'N_FREIGHT', summaryType: 'sum', renderer: formatNumberDefault, align: 'right', editor: numField}
    ]
    });

//如果全部列都可排序否则单个设置
    cm.defaultSortable = false;

    //创建一个store
    var shipmentsDetailstore = new Ext.data.Store({
        proxy: proxy,
        reader: reader,
        autoDestroy: true,
        autoLoad: { params: { start: 0, limit: pageSize} }
    });

    //插入行按钮
    var btn_Insert = new Ext.Button({ text: '插入行', iconCls: 'insert', handler: function () {
        //定义一个recode对象
        var initValue = createShipmentDetailRow();
        grid.stopEditing();
        var maxRowIndex = grid.getStore().getCount();
        grid.getStore().insert(maxRowIndex, initValue); //在第一个位置插入
        grid.view.refresh();
        grid.getSelectionModel().selectLastRow();
        grid.getView().focusRow(maxRowIndex); //焦点标记行
        grid.startEditing(maxRowIndex, 2); //单元格转换成编辑状态
    }
    });
    //删除行按钮
    var btn_Remove = new Ext.Button({ text: '删除行', iconCls: 'delete', handler: function () {
        grid.stopEditing();
        var rows = grid.getSelectionModel().getSelections();
        if (rows == undefined || rows.length == 0) {
            setShipmentStatusBarText('error', '请选择需要删除的行！');
            return; //判断记录集是否为空，为空返回
        }
        grid.getStore().remove(rows);
        grid.view.refresh();
    }
    });

    //工具栏
    var tbar = new Ext.Toolbar({
        cls: 'top-toolbar',
        items: [btn_Insert, '-', btn_Remove]
    });
    var summary = new Ext.ux.grid.GridSummary();
    //创建GRID
    var grid = new Ext.grid.EditorGridPanel
        ({
            id: 'ShipmentsDetailGirdPanel',
            deferredRender: false,
            enableColumnHide: false,
            enableHdMenu: false,
            columnLines: true,
            enableColumnMove: false,
            store: shipmentsDetailstore,
            sm: sm,
            cm: cm,
            loadMask: true,
            //自适应宽度参数为列数
            //            autoExpandColumn: 4,
            //超过长度带自动滚动条
            autoScroll: true,
            border: false,
            nocache: false,
            timeout: 10,
            clicksToEdit: 1,
            scripts: true,
            loadMask: { msg: '正在加载数据，请稍侯……' },
            tbar: tbar,
            view: new Ext.ux.grid.BufferView({
                rowHeight: 25,
                scrollDelay: true,
                forceFit: true,
                deferEmptyText: true,
                emptyText: "无数据"
            }),
            plugins: summary
        });

5.此时会看到合计行字体偏小
添加样式

.x-grid3-summary-row .x-grid3-cell-inner {
FONT: 12.5px tahoma,arial,helvetica,sans-serif
}

6.此示例Ext版本为 3.4.0

小胡子 2013-02-21 15:51 发表评论

【转】解决ExtJS的gridpanel在谷歌浏览器中，表头总宽度与每行的总宽度不一致的bug

小胡子 — Wed, 30 Jan 2013 07:30:00 GMT

[代码] [JavaScript]代码

1 //先看bug

[图片] EXT-bug1.png

[图片] EXT-bug2.png

[代码] [JavaScript]代码

//修复办法，谷歌浏览器中,table的单元格实际宽度=指定宽度+padding，所以只要重写gridview里的一个方法，如下：

1 //修复办法，谷歌浏览器中,table的单元格实际宽度=指定宽度+padding，所以只要重写gridview里的一个方法，如下：
2 Ext.override(Ext.grid.GridView,{
3         getColumnStyle : function(colIndex, isHeader) {
4             var colModel  = this.cm,
5                 colConfig = colModel.config,
6                 style     = isHeader ? '' : colConfig[colIndex].css || '',
7                 align     = colConfig[colIndex].align;
8
9             if(Ext.isChrome){
10                 style += String.format("width: {0};", parseInt(this.getColumnWidth(colIndex))-2+'px');
11             }else{
12                 style += String.format("width: {0};", this.getColumnWidth(colIndex));
13             }
14
15             if (colModel.isHidden(colIndex)) {
16                 style += 'display: none; ';
17             }
18
19             if (align) {
20                 style += String.format("text-align: {0};", align);
21             }
22
23             return style;
24         },
25     });
26

[代码] [JavaScript]代码

//看看修复过后的效果



原文出自：http://www.oschina.net/code/snippet_201314_15163

小胡子 2013-01-30 15:30 发表评论

【转】ExtJs中处理时间，出现NaN-NaN-NaN的解决方式

小胡子 — Sun, 30 Dec 2012 05:06:00 GMT

一般我们的前台代码Ext.grid.ColumnModel里会这样写，以便显示日期格式：

//////////////////////////////////////////////////////////////

Js代码
....
{ header:"birthday",

dataIndex:"birthday"

....

renderer:new Ext.util.Format.dateRenderer("Y-m-d"),
....

}

....

//////////////////////////////////////////////////////////////

　　如果你前台这样写的话，那恭喜你，你的显示日期那列将不再正确显示时间，

而是显示为"NaN-NaN-NaN"，是吧？

　　呵呵，问我怎么知道的？因为最开始我也是这么错的。

　　为什么会是错的呢？

　　让我们来看看Ext.format.dateRenderer的源代码（开源的东西就是好），

它的源代码是这样的：

Js代码

//////////////////////////////////////////////////////////////
dateRenderer : function(format) {
    return function(v) {
        return Ext.util.Format.date(v, format);、
    }
}

//////////////////////////////////////////////////////////////

　　可以看出，我们传会来的值，被当做日期又被格式化了一次，我们传回来的是日期吗？

以前是，经过昨天后台代码的修改，我们传回来的仅仅是个字符串了，至于为什么要这么改，

请看昨天写的“Extjs日期格式问题(一) ”，那咋办？有的朋友应该已经想到了，既然是字符串，

那就直接显示呗，不用renderer了，于是前台代码Ext.grid.ColumnModel里就变成了：

Js代码

//////////////////////////////////////////////////////////////
....
{header:"birthday",dataIndex:"birthday".......),
....
//////////////////////////////////////////////////////////////

　　可以负责任的告诉你，这样写，绝对可以正确显示了，这样是不是感觉更简单了呢？

　　但是，基于我项目里的要求，这个问题并没有解决完，因为在这里不是一个简单的gridpanel，

而是一个editgridpanel，所以还得定义一个editor，于是有了下面这样一段代码：

Js代码

//////////////////////////////////////////////////////////////
....
{header:"birthday",dataIndex:"birthday".......，
      editor:new Ext.grid.GridEditor(new Ext.form.DateField({format:"Y-m-d"})),
.....

//////////////////////////////////////////////////////////////

　　加了这个DateField控件后，每次可以正常的选择日期，但是选择完日期后，

grid里显示的格式就又不正确了，这次显示的内容成了： "Wed Mar 04 1970......"，

这样的格式一看就是个日期，这样显示的原因当然是因为我们没有写renderer进行格式化处理的缘故。。。

说到这里，有人应该已经想到解决办法了，另外有些人可能就抓狂了，这renderer加了不能正常显示，

不加也不能正常显示，这很矛盾啊。。

　　问题往往到了最矛盾的时候，也是到了解决的时候，现在我把解决代码贴出来，大家一看就明白了。

多的不说，看代码：

Js代码
//////////////////////////////////////////////////////////////

renderer:function(value){
    if(value instanceof Date){
        return new Date(value).format("Y-m-d");
    }else{
        return value;
    }
}
//////////////////////////////////////////////////////////////

　　简单吧？自己写renderer就是了。

原文出自：http://ks2144634.blog.163.com/blog/static/133585503201081544950656/

小胡子 2012-12-30 13:06 发表评论

【转】Ext.form.DateField简单用法及日期范围控制

小胡子 — Sun, 16 Dec 2012 14:31:00 GMT

项目中有时需要用到起始日期和结束日期，要做到起始日期必须小于结束日期。在extjs中已经有现成的函数，摘录如下：

1 Ext.apply(Ext.form.VTypes, {
2             daterange : function(val, field) {
3                 var date = field.parseDate(val);
4                 if (!date) {
5                     return;
6                 }
7                 if (field.startDateField
8                         && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax
9                                 .getTime()))) {
10                     var start = Ext.getCmp(field.startDateField);
11                     start.setMaxValue(date);
12                     start.validate();
13                     this.dateRangeMax = date;
14                 } else if (field.endDateField
15                         && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin
16                                 .getTime()))) {
17                     var end = Ext.getCmp(field.endDateField);
18                     end.setMinValue(date);
19                     end.validate();
20                     this.dateRangeMin = date;
21                 }
22                 /*
23                  * Always return true since we're only using this vtype to set
24                  * the min/max allowed values (these are tested for after the
25                  * vtype test)
26                  */
27                 return true;
28             }
29         });

然后分别定义起始日期和结束日期控件：

1 var startDate = new Ext.form.DateField({
2                 fieldLabel : '开始日期',
3                 emptyText : '请选择',
4                 disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
5                 labelWidth : 100,
6                 readOnly : true,
7                 allowBlank : false,
8                 format : 'Y-m-d',//日期格式
9                 name : 'startdt',
10                 id : 'startdt',
11                 vtype : 'daterange',//daterange类型为上代码定义的类型
12                 endDateField : 'endDate'//必须跟endDate的id名相同
13             })
14     var endDate = new Ext.form.DateField({
15                 fieldLabel : '结束日期',
16                 emptyText : '请选择',
17                 disabledDays : [1, 2, 5],//将星期一,二,五禁止.数值为0-6,0为星期日,6为星期六
18                 readOnly : true,
19                 allowBlank : false,
20                 format : 'Y-m-d',//日期格式
21                 name : 'enddt',
22                 id : 'endDate',
23                 vtype : 'daterange',//daterange类型为上代码定义的类型
24                 startDateField : 'startdt'//必须跟startDate的id名相同
25             })

效果如下两图：

图1.选择开始日期

图2.选择结束日期

原文出自：

http://blog.csdn.net/security08/article/details/5070749

小胡子 2012-12-16 22:31 发表评论

【转】EXT VTYPE

小胡子 — Sat, 08 Dec 2012 15:19:00 GMT

摘要: 近日来对Ext特别感兴趣,也许是它那种OO的设计思想吸引了我,也可以追溯到第一次见到EXT那种漂亮的界面开始吧.求神拜佛不如自食其力,为了一点小的问题找遍了GOOGLE也没个结果,自己甚少去BBS混,也不熟悉规矩,只能硬着头皮自己干了.翻源代码是一道必不可少的工序,说来惭愧,自己对JS的认识还停留在入门阶段.这里说说自己对于Ext验证这里浅薄的理解:首先看看如下一段代码Code highlight... 阅读全文

小胡子 2012-12-08 23:19 发表评论

【转】 formPanel 按回车变TAB键

小胡子 — Thu, 06 Dec 2012 15:16:00 GMT

在formPanel里加个Key事件

1  keys : [{
2       key : Ext.EventObject.ENTER,
3       fn : function(keyCode, e) {
4        var field = Ext.getCmp(e.target.id);
5        if (Ext.isDefined(field) && field != null) {
6         if (Ext.isDefined(field.xtype)) {
7          if (field.isXType('datefield')) {
8           field.setValue(field.getValue());
9          }
10         }
11        }
12        if (Ext.isIE) {
13         e.browserEvent.keyCode = Ext.EventObject.TAB;
14        } else {
15         var currentfield = Ext.getCmp(e.target.id);
16         var fields = refThis.HusbandView
17           .findByType('field');
18         var i = 0;
19         for (; i < fields.length; i++) {
20          if (fields[i].id == currentfield.id)
21           break;
22         }
23         while (true) {
24          i++;
25          if (fields.length <= i)
26           break;
27          if (!fields[i].disabled
28            && fields[i].xtype != 'hidden'
29            && !fields[i].hidden)
30           break;
31         }
32         if (fields.length <= i)
33          return;
34         if (!fields[i].disabled) {
35          fields[i].focus();
36          if (Ext.isDefined(fields[i].selectText))
37           fields[i].selectText();
38         }
39        }
40       }
41      }]

原文出自：

http://xlong224.blog.163.com/blog/static/601214932011102810201224/

小胡子 2012-12-06 23:16 发表评论

【转】Extjs学习总结---Ext.Grid回车控制

小胡子 — Thu, 06 Dec 2012 15:14:00 GMT

原先的EditGrid无法解决回车控制问题，它的回车控制是向下跑的。而我想让它横着走。搞了半天终于实现了。

1 Ext.override(Ext.grid.RowSelectionModel, {
2                 onEditorKey : function(field, e) {
3                     // alert('go');
4                     var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor;
5                     var shift = e.shiftKey;
6                     Ext.log('k:' + k);
7                     if (k == e.ENTER) {
8                         e.stopEvent();
9                         ed.completeEdit();
10                         if (shift) {
11                             newCell = g.walkCells(ed.row, ed.col - 1, -1,
12                                     this.acceptsNav, this);
13                         } else {
14                             // alert('go');
15                             newCell = g.walkCells(ed.row, ed.col + 1, 1,
16                                     this.acceptsNav, this);
17                         }
18                     } else if (k == e.TAB) {
19                         e.stopEvent();
20                         ed.completeEdit();
21                         if (this.moveEditorOnEnter !== false) {
22                             if (shift) {
23                                 newCell = g.walkCells(ed.row - 1, ed.col, -1,
24                                         this.acceptsNav, this);
25                             } else {
26                                 // alert('go');
27                                 newCell = g.walkCells(ed.row + 1, ed.col, 1,
28                                         this.acceptsNav, this);
29                             }
30                         }
31                     } else if (k == e.ESC) {
32                         ed.cancelEdit();
33                     }
34                     if (newCell) {
35                         g.startEditing(newCell[0], newCell[1]);
36                     }
37                 }
38             });
39     var sm2 = new Ext.grid.RowSelectionModel({
40         moveEditorOnEnter : true,
41         singleSelect : true,
42         listeners : {
43             rowselect : function(sm, row, rec) {
44                 centerForm.getForm().loadRecord(rec);
45             }
46         }
47
48     });

原文出自：

http://erichua.iteye.com/blog/234698

默认extjs中editorgrid编辑单元格的时候按回车是将焦点向下移动，按照一般的逻辑应该是向右移动。

其实只要将原先rowSelectionModel中onEditorKey方法override一下即可。

代码如下：

1 Ext.override(Ext.grid.RowSelectionModel, {
2
3  onEditorKey : function(field, e) {
4   var k = e.getKey(), newCell, g = this.grid, last = g.lastEdit, ed = g.activeEditor, shift = e.shiftKey, ae, last, r, c;
5
6   if (k == e.TAB) {
7    e.stopEvent();
8    ed.completeEdit();
9    if (shift) {
10     newCell = g.walkCells(ed.row, ed.col - 1, -1, this.acceptsNav,
11       this);
12    } else {
13     newCell = g.walkCells(ed.row, ed.col + 1, 1, this.acceptsNav,
14       this);
15    }
16   } else if (k == e.ENTER) {
17    if (this.moveEditorOnEnter !== false) {
18     if (shift) {
19      newCell = g.walkCells(last.row, last.col - 1, -1,
20        this.acceptsNav, this);
21     } else {
22      newCell = g.walkCells(last.row, last.col + 1, 1,
23        this.acceptsNav, this);
24     }
25    }
26   }
27   if (newCell) {
28    r = newCell[0];
29    c = newCell[1];
30
31    this.onEditorSelect(r, last.row);
32
33    if (g.isEditor && g.editing) { // *** handle tabbing while
34            // editorgrid is in edit mode
35     ae = g.activeEditor;
36     if (ae && ae.field.triggerBlur) {
37      // *** if activeEditor is a TriggerField, explicitly call
38      // its triggerBlur() method
39      ae.field.triggerBlur();
40     }
41    }
42    g.startEditing(r, c);
43   }
44  }
45 })

小胡子 2012-12-06 23:14 发表评论

BlogJava-海水正蓝-随笔分类-Ext

让Extjs EditorGridPanel 编辑时支持方向键

提高EXT js的加载速度的方法

[转]Ext GridPanel根据条件显示复选框

[转]EXT EditorGridPanel 中用复选框表示真假值,扩展官方示例

【转】Ext.grid.GridPanel隔行显示不同的背景颜色

【转】Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)

ExtJS 2.2,图书管理系统 共享全部源码下载

[转]Ext combobox 动态模糊匹配

【转】ExtJS练习——ComboBox的四种扩展

【转】Ext Combox 分页

Ext EditorGridPanel 指定单元格不可编辑

Ext 不分组合计

【转】解决ExtJS的gridpanel在谷歌浏览器中，表头总宽度与每行的总宽度不一致的bug

[代码] [JavaScript]代码

[图片] EXT-bug1.png

[图片] EXT-bug2.png

[代码] [JavaScript]代码

[代码] [JavaScript]代码

【转】ExtJs中处理时间，出现NaN-NaN-NaN的解决方式

【转】Ext.form.DateField简单用法及日期范围控制

【转】EXT VTYPE

【转】 formPanel 按回车变TAB键

【转】Extjs学习总结---Ext.Grid回车控制

ExtJS 2.2,图书管理系统共享全部源码下载