Ext.ux.form.SearchField 详解

最新推荐文章于 2021-03-17 11:44:02 发布

zhoushuai3066

最新推荐文章于 2021-03-17 11:44:02 发布

阅读量7.3k

点赞数

分类专栏： Ext 文章标签： stylesheet licensing function search ext library

Ext 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

如何为Ext增加搜索条,有很多种办法,参考很多实现,觉得都不理想,参考了Ext的Example,觉得还是ext自己的写的比较专业

ExtSearchField插件代码,在ux目录可以找到

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.form');

Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
    initComponent : function(){
        Ext.ux.form.SearchField.superclass.initComponent.call(this);
        this.on('specialkey', function(f, e){
            if(e.getKey() == e.ENTER){
                this.onTrigger2Click();
            }
        }, this);
    },

    validationEvent:false,
    validateOnBlur:false,
    trigger1Class:'x-form-clear-trigger',
    trigger2Class:'x-form-search-trigger',
    hideTrigger1:true,
    width:180,
    hasSearch : false,
    paramName : 'query',//注意这个参数是传输入查询的值

    onTrigger1Click : function(){
        if(this.hasSearch){
            this.el.dom.value = '';
            var o = {start: 0};
            this.store.baseParams = this.store.baseParams || {};
            this.store.baseParams[this.paramName] = '';
            this.store.reload({params:o});
            this.triggers[0].hide();
            this.hasSearch = false;
        }
    },

// 当输入查询回车或者按搜索按钮执行

    onTrigger2Click : function(){
        var v = this.getRawValue();
        if(v.length < 1){
            this.onTrigger1Click();
            return;
        }
        var o = {start: 0};
        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramName] = v;//this.paramName=query

        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
    }
});

找到ext/examples/form/custom.html这个例子,这个例子已经很好的把 SearchField集成了

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Custom Fields</title>
    <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<p>
    <b>Custom Form Fields</b><br />
    Ext provides many types of form fields to build interactive and rich forms. However, it also
    provides a complete framework for building new types of fields quickly. The search field below
    is an example.
</p>
<p>The js is not minified so it is readable. See <a href="custom.js">custom.js</a>.</p>

</body>
</html>

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
    var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://extjs.com/forum/topics-remote.php'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'post_id'
        }, [
            {name: 'postId', mapping: 'post_id'},
            {name: 'title', mapping: 'topic_title'},
            {name: 'topicId', mapping: 'topic_id'},
            {name: 'author', mapping: 'author'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
            {name: 'excerpt', mapping: 'post_text'}
        ]),

baseParams: {limit:20, forumId: 4}
});

    // Custom rendering Template for the View
    var resultTpl = new Ext.XTemplate(
        '<tpl for=".">',
        '<div class="search-item">',
            '<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>',
            '<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',
            '<p>{excerpt}</p>',
        '</div></tpl>'
    );

    var panel = new Ext.Panel({
        applyTo: 'search-panel',
        title:'Forum Search',
        height:300,
        autoScroll:true,

        items: new Ext.DataView({
            tpl: resultTpl,
            store: ds,
            itemSelector: 'div.search-item'
        }),

        tbar: [
            'Search: ', ' ',
            new Ext.ux.form.SearchField({
                store: ds,
                width:320
            })
        ],

//这里在实际项目中可能还要 tbar里面增加案钮

bbar: new Ext.PagingToolbar({
            store: ds,
            pageSize: 20,
            displayInfo: true,
            displayMsg: 'Topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        })
    });

ds.load({params:{start:0, limit:20, forumId: 4}});
});

zhoushuai3066

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Ext.ux.form.SearchField 详解

如何为Ext增加搜索条,有很多种办法,参考很多实现,觉得都不理想,参考了Ext的Example,觉得还是ext自己的写的比较专业ExtSearchField插件代码,在ux目录可以找到/*!* Ext JS Library 3.0.0* Copyright(c) 2006-2009 Ext JS, LLC* licensing@extjs.com* http://www.extjs.com
复制链接

扫一扫

专栏目录