`
bingo6001
  • 浏览: 10666 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

EXT combobox控件异步提交到后台中文乱码解决方案

阅读更多
    序:所有文件都是GBK编码,JSP定义的是GBK编码,EXT文件也另存为了GBK编码。

    项目里用ext的combobox控件做了一个动态下拉菜单,因为数据量可大可小,所以没有预先将数据加载到前台jsp,而是实时查询后台所有符合条件的数据。对于简拼和全拼的查询支持较好,但是输入中文却一直没法得到正确的搜索结果,debug后台代码,发现从前台传过来的数据是乱码。
    后来在网上搜了很久,有很多人说把所有的编码都改成UTF-8就成(EXT默认是UTF-8),但这对于一个已经成熟应用的项目来说显然不实际。也有说在EXT文件中强制将POST编码修改为GBK的,经试验,此方法不可行。很多同学也说需要在传输前对url进行encodeuri,不过对于combobox在异步提交时一直没找到在那边进行encode。当然,ITEYE上也有同学说如果项目非要GBK,那这和EXT默认UTF-8编码就成了不可调和的矛盾,一下就被打击了,遂放弃好久没去理它。
    不过想想这肯定有解决的办法,翻API时看到了beforquery,试了一下,原来可以在这个事件里对传输的query字符进行编码,后台java代码进行UTF解码。

附代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
<HTML>
<HEAD>
    <title>title</title>
    <script type="text/javascript">
Ext.onReady(function () {
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: '/spirit.do?method=jsonEmployee'
        }),
        reader: new Ext.data.JsonReader({
            root: 'employees',
            totalProperty: 'totalCount',
            id: 'employeeId'
        }, [
            {
                name: 'employeeId',
                mapping: 'employeeId'
            },
            {
                name: 'employeeName',
                mapping: 'employeeName'
            }
        ])
    });

    var resultTpl = new Ext.XTemplate(
        '<tpl for="."><div class="search-item" >',
        '<span style="width:225;padding-left:20px;">{employeeName}</span>',
        '</div></tpl>'
    );

    function addSearch(t) {
        var search = new Ext.form.ComboBox({
            store: ds,
            displayField: 'employeeName',
            valueField: 'employeeName',
            loadingText: '正在查找...',
            emptyText: '请输入简拼或全拼',
            minChars:1,
            width: 180,
            pageSize: 20,
            listWidth:300,
            hideTrigger:true,
            tpl: resultTpl,
            lazyInit: true,
            lazyRender: true,
            focusClass: '',
            itemSelector: 'div.search-item',
            listeners: {
                'beforequery': function (e) {
                    var combo = e.combo;
                    if (!e.forceAll) {
                        var input = e.query;
						//input:管
                        e.query = encodeURI(input);
						//before:%E7%AE%A1
						//后台java代码:String query = URLDecoder.decode(StringTool.safeToString(_form.getQuery(), ""), "UTF-8");
						//after:管
                        combo.expand();
                    }
                }
            }
        });

        search.applyToMarkup(t);
        t.search = search;
    }

    function txtOnFocus(evt, t, o) {
        var _t = Ext.Element.get(t.id);
        var n = _t.next();
        if (n && n.hasClass('spirit-append')) {
            n.dom.innerText = '';
        }
    }

    function txtOnClick(evt, t, o) {
        ds.load({params: {start: 0, limit: 20}});
    }

    var ss = Ext.select('.cust-employee-spirit');
    for (var i = 0; i < ss.getCount(); i++) {
        var el = ss.item(i);
        el.addListener("focus", txtOnFocus);
        el.addListener("click", txtOnClick);
        addSearch(el.dom);
    }
});
</script>
</HEAD>

<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="100px" nowrap>
                用户姓名:
            </td>
            <td width="200px" nowrap>
                <div class="employee-spirit-container-1">
                    <input type="hidden" name="employeeId" value="0">
                    <input type="text" name="employeeName" value="" class="inputbox  cust-employee-spirit">
                </div>
            </td>
        </tr>
    </table>
</body>
</HTML>

关键就在于这一段:
'beforequery': function (e) {
                    var combo = e.combo;
                    if (!e.forceAll) {
                        var input = e.query;
						//input:管
                        e.query = encodeURI(input);
						//before:%E7%AE%A1
						//后台java代码:String query = URLDecoder.decode(StringTool.safeToString(_form.getQuery(), ""), "UTF-8");
						//after:管
                        combo.expand();
                    }
                }

    可以从代码注释中看出,我在输入框中传递的文本是“管”,encode之后转为了“%E7%AE%A1”,在后台需要再次将它转回UTF-8格式。就这样,困扰我多日的问题也就随之解决,希望对于同样碰到此问题的同学们起到帮助。
0
0
分享到:
评论

相关推荐

    Ext combobox 下拉多选框带搜索功能

    它提供了一套丰富的组件,包括各种类型的输入控件,如ComboBox。在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索...

    ext combobox二级联动

    ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...

    Combobox控件某些项不能选的例子

    - 当Combobox的数据源来自数据库或其他数据集时,要确保所有数据项都被正确地添加到控件中,并且状态设置正确。 7. **解决方案** - 检查并修正代码中的逻辑错误,确保所有项的Enabled和Visible属性设置正确。 - ...

    winform关于combobox控件使用详解

    例如,使用 CB_ADDSTRING 消息可以添加项到 ComboBox 控件中,而 CB_DELETESTRING 消息可以删除指定的项。 响应 ComboBox 控件的 Notification 消息 ComboBox 控件可以响应多种 Notification 消息,例如 CBN_...

    ComboBox 控件隐藏 fieldLabel 不能隐藏问题解决

    总之,解决ComboBox控件隐藏fieldLabel的问题通常涉及到对代码、框架API和CSS样式的深入理解。通过细心检查、学习和实践,大多数问题都能找到合适的解决方案。在实际工作中,不断提升自己的技术水平和解决问题的能力...

    C# ListView中添加ComboBox等控件

    标题"\"C# ListView中添加ComboBox等控件\"\"指的是如何在ListView的每一行或每一列中添加ComboBox控件,使用户可以在ListView内进行更复杂的操作。这个过程通常涉及到以下几个步骤: 1. **创建ListView控件**:...

    mfc中自绘ComboBox控件的美化有输入的历史记录

    在MFC(Microsoft Foundation Classes)框架中,ComboBox控件是一种常用的UI元素,它结合了文本框和下拉列表的功能。自定义和美化ComboBox控件可以让应用程序的用户界面更加吸引人和个性化。本教程将深入探讨如何在...

    DropDownList控件和comboBox控件自动生成年月日

    DropDownList控件和ComboBox控件自动生成年月日 DropDownList控件和ComboBox控件是ASP.NET Web Form中常用的控件,它们可以用来实现选择年月日的功能。下面将详细介绍如何使用DropDownList控件和ComboBox控件自动...

    C#comboBox控件的使用

    在C#编程中,`comboBox`控件是一个非常常见的组件,用于展示下拉列表供用户选择。这个控件在各种应用程序界面设计中扮演着重要角色,例如设置配置、选择选项等。下面我们将深入探讨`comboBox`控件的使用,包括其基本...

    winform中combobox控件使用详解

    ComboBox 控件支持数据绑定,可以将数据源绑定到ComboBox 控件上,以下是一些常用的数据绑定方式: * DataSource:获取或设置此 ComboBox 的数据源。 * DisplayMember:获取或设置要为此 ListControl 显示的属性。 ...

    在combobox控件中添加图标

    首先在窗体中添加一个comboBox1和一个imageList(本例中带有三个图片) this.comboBox1.DrawMode = System.Windows.Forms.DrawMode.OwnerDrawFixed;

    ComboBox控件用法

    ComboBox 控件用法 ComboBox 控件是 Windows 窗体应用程序中常用的控件之一...ComboBox 控件的五个常见用法可以满足不同的需求,从实现“只能选择,不能修改”到定位并展开下拉框,ComboBox 控件都是非常实用的控件。

    Ext4.0 动态修改ComboBox选择项(本地模式)

    首先,ComboBox在Ext JS中是一个可选列表的输入控件,它可以展示一个下拉菜单供用户选择。在本地模式下,ComboBox的数据通常存储在本地,如JavaScript数组中,而不是从远程服务器获取。这样可以提高应用的响应速度,...

    C# 自定义控件 自定义ComboBox

    在实际开发过程中,你可能会遇到各种具体问题,但只要掌握了自定义控件的基本原理,就可以灵活应对并解决这些问题。记住,自定义控件的核心在于理解基类的内部工作原理,然后在此基础上进行扩展和改造。

    WinForm中comboBox控件数据绑定实现方法

    WinForm中comboBox控件数据绑定的实现方法 WinForm中comboBox控件数据绑定是许多开发者需要掌握的技巧,本文将详细介绍WinForm中comboBox控件数据绑定的实现方法,并结合实例形式分析了WinForm实现comboBox控件数据...

    VB基于ComboBox控件的自动匹配查询内容实例源码

    资源名:VB基于ComboBox控件的自动匹配查询内容实例源码 资源类型:程序源代码 源码说明:VB基于ComboBox控件的自动匹配查询内容实例 autocomplete 自动完成 适合人群:新手及有一定经验的开发人员

    Ext ComboboxGrid

    "Ext ComboboxGrid"是一个基于Ext JS框架的组件,它结合了下拉框(ComboBox)和数据网格(Grid)的功能,提供了一种更强大的选择和筛选数据的方式。在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则...

    ComboBox控件.docx

    3. **数据源绑定**:在代码后台,你需要将数据绑定到控件。对于`DataTable`数据源,你可以自定义列的显示名称和显示在下拉列表中的列。 ### 源代码分析 源代码包含了界面和逻辑部分,可能已经打包成压缩文件供下载...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

Global site tag (gtag.js) - Google Analytics