/**
 * UB-RIA-UI 1.0
 * Copyright 2014 Baidu Inc. All rights reserved.
 *
 * @ignore
 * @file 带选择框筛选功能的列表型富选择器
 * @author lixiang(lixiang05@baidu.com)
 */
define(
    function (require) {
        var esui = require('esui');
        var lib = require('esui/lib');
        var u = require('underscore');
        var eoo = require('eoo');
        var painters = require('esui/painters');

        require('esui/Select');
        require('esui/Panel');

        var TableRichSelector = require('./TableRichSelector');

        /**
         * 控件类
         *
         * @class ui.TableRichSelectorWithFilter
         * @extends ui.RichSelector
         */
        var TableRichSelectorWithFilter = eoo.create(
            TableRichSelector,
            {

                /**
                 * 控件类型，始终为`"TableRichSelectorWithFilter"`
                 *
                 * @type {string}
                 * @override
                 */
                type: 'TableRichSelectorWithFilter',

                /**
                 * @override
                 */
                styleType: 'RichSelector',


                /**
                 * 在搜索框的旁边增加筛选
                 * @override
                 */
                getSearchBoxHTML: function () {
                    var searchBoxHTML = this.$super(arguments);

                    var filterHTML = '<div data-ui="type:Select;childName:filter;"></div>';

                    return filterHTML + searchBoxHTML;
                },

                /**
                 * 刷新筛选区
                 * @public
                 */
                refreshFilter: function () {
                    var filter = this.getFilter();

                    if (filter) {
                        filter.setProperties({datasource: this.filterDatasource});
                        filter.on('change', u.bind(this.search, this));
                    }
                },

                /**
                 * 重新渲染视图
                 * 仅当生命周期处于RENDER时，该方法才重新渲染
                 *
                 * @param {Array=} 变更过的属性的集合
                 * @override
                 */
                repaint: painters.createRepaint(
                    TableRichSelector.prototype.repaint,
                    {
                        name: 'filterDatasource',
                        paint: function (control, filterDatasource) {
                            control.refreshFilter();
                        }
                    }
                ),

                /**
                 * @override
                 */
                initStructure: function () {
                    this.$super(arguments);
                    // 状态筛选，最终调用search函数
                    var filter = this.getFilter();
                    filter.extensions[0].activate();

                    this.addState('with-filter');
                },

                /**
                 * @override
                 */
                search: function (args) {
                    var filterData = [];
                    // 取自带搜索框的值
                    var searchBox = this.getSearchBox();
                    if (searchBox) {
                        filterData.push({value: lib.trim(searchBox.getValue())});
                    }

                    var filterSelect = this.getFilter();
                    if (filterSelect) {
                        var value = filterSelect.getValue();
                        if (value && value !== '') {
                            filterData.push({keys: [this.filterField], value: filterSelect.getRawValue()});
                        }
                    }

                    if (filterData.length) {
                        // 查询，更新数据源
                        this.queryItem(filterData);
                        // 更新腿部总结果
                        this.refreshFoot();
                        // 更新头部总结果
                        this.refreshHead();
                        // 更新状态
                        this.addState('queried');
                    }
                    // 相当于执行清空操作
                    else {
                        this.clearQuery();
                    }
                },

                /**
                 * 获取筛选区Panel
                 * @return {esui.Panel}
                 */
                getFilter: function () {
                    return this.getChild('body').getChild('filter');
                }
            }
        );

        esui.register(TableRichSelectorWithFilter);
        return TableRichSelectorWithFilter;
    }
);

@@ -1284,165 +1284,726 @@
 L = 
-this.$super(arguments);%0A%0A                    var filterHTML = '%3Cdiv data-ui=%22type:Select;childName:filter;%22%3E%3C/div%3E';%0A%0A                    return filterHTML +
+%5B%0A                        // %E6%90%9C%E7%B4%A2%E5%8C%BA%0A                        '%3Cdiv data-ui=%22type:Panel;childName:searchBoxArea%22',%0A                        ' class=%22' + this.helper.getPartClassName('search-wrapper') + '%22%3E',%0A                        '   %3Cdiv style=%22float:left%22 data-ui=%22type:Select;childName:filter;%22%3E%3C/div%3E',%0A                        '   %3Cdiv',%0A                        '   data-ui=%22buttonPosition:right;buttonVariants:bordered icon;',%0A                        '   type:SearchBox;childName:itemSearch;variants:clear-border',%0A                        '   hide-searched-button;searchMode:instant;%22%3E',%0A                        '   %3C/div%3E',%0A                        '%3C/div%3E'%0A                    %5D.join('');%0A%0A                    return
  sea
@@ -4901,16 +4901,42 @@
 tChild('
+searchBoxArea').getChild('
 filter')

fix style