Combo with Templates and Ajax

” 可以用来动态的查询获取后台的数据，本文讲述的是如何将其稍加改造使其更加符合用户需求。

这是extjs提供的组件我做了截图。

改进部分：

1、模糊查询和后台交互（暂未做到拼音查询和搜索式的查询）

2、根据数据类型（需要提前将数据分类并将数据的分类类型传到前台）

3、展示依然是下拉框的形式。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

下面讲思路：

1、先研究了下该组件的实现：

Ext.require([
    'Ext.data.*','Ext.form.*'
]);

Ext.onReady(function(){

    Ext.define("Post",{
        extend: 'Ext.data.Model',proxy: {
            type: 'jsonp',url : 'http://www.sencha.com/forum/topics-remote.php',reader: {
                type: 'json',root: 'topics',totalProperty: 'totalCount'
            }
        },fields: [
            {name: 'id',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'}
        ]
    });

    ds = Ext.create('Ext.data.Store',{
        pageSize: 10,model: 'Post'
    });

    panel = Ext.create('Ext.panel.Panel',{
        renderTo: Ext.getBody(),title: 'Search the Ext Forums',width: 600,bodyPadding: 10,layout: 'anchor',items: [{
            xtype: 'combo',store: ds,displayField: 'title',typeAhead: false,hideLabel: true,hideTrigger:true,anchor: '100%',listConfig: {
                loadingText: 'Searching...',emptyText: 'No matching posts found.',// Custom rendering template for each item
                getInnerTpl: function() {
                    return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
                        '<h3><span>{[Ext.Date.format(values.lastPost,"M j,Y")]}<br />by {author}</span>{title}</h3>' +
                        '{excerpt}' +
                    '</a>';
                }
            },pageSize: 10
        },{
            xtype: 'component',style: 'margin-top:10px',html: 'Live search requires a minimum of 4 characters.'
        }]
    });
});

ds是其数据源,而

url : 'http://www.sencha.com/forum/topics-remote.php',则是其向后台发送到连接请求路径。

fields：

  fields: [
            {name: 'id',mapping: 'post_text'}

是后台数据字段映射到前台的字段。

而其他的属性配置如：

xtype: 'combo',

若实现下拉的样式控制，则要看listconfig了。

listConfig

listConfig : Object
An optional set of configuration properties that will be passed to the Ext.view.BoundList's constructor. Any configuration that is valid for BoundList can be included. Some of the more useful ones are:

Ext.view.BoundList.cls - defaults to empty
Ext.view.BoundList.emptyText - defaults to empty string
Ext.view.BoundList.itemSelector - defaults to the value defined in BoundList
Ext.view.BoundList.loadingText - defaults to 'Loading...'
Ext.view.BoundList.minWidth - defaults to 70
Ext.view.BoundList.maxWidth - defaults to undefined
Ext.view.BoundList.maxHeight - defaults to 300
Ext.view.BoundList.resizable - defaults to false
Ext.view.BoundList.shadow - defaults to 'sides'
Ext.view.BoundList.width - defaults to undefined (automatically set to the width of the ComboBox field if matchFieldWidth is true)

动手改改getInnerTpl里的html就可以了。其中{}里的元素就是对应feilds的mapping代码。因而可以想到如果要更改下拉里的样式,那么就要从这里入手了～～

思路其实很简单,前面说了，要实现的是分类的图标标识，所以后台必然要将分类的类型传递给前台,怎么传递呢?

前面也说了url属性后的url路径即是请求路径,那么具体的请求就更改url就行了。

那如何实现模糊查询呢？ 那就自己在后台写啦·～～最简单的sql语句里使用like '%parmas%'就行了。

另外如何设置触发这条url呢?

阅读API不难发现：

最后就是美工的活了。前台既然给了类型,那就容易定义css class了，根据不同的类型定义相应的样式（当然太多的话，也不轻松）,举个简单的例子：

将：

 return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
                        '<h3><span>{[Ext.Date.format(values.lastPost,Y")]}<br />by {author}</span>{title}</h3>' +
                        '{excerpt}' +
                    '</a>';

样式里设置相应的背景图片即可。

效果：

仔细阅读api的话，有更好的方法改造它，以上仅仅是简单的更改,设计到复杂些的更改估计就得往boundlist里专研了～

仅供了解学习,因为水平太差，讲不好道不明，本文仅为了证明可以这么做，或许有更好的方法提供出来供网友学习。（应网友请求,将其发到csdn，欢迎指正）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!