Ext.js5表单—（triggers触发器）（baseCSSPrefix）（specialkey）利用Ext.js提供的框架创建自己的表单（查询表单）(51)

最新推荐文章于 2023-02-22 16:23:29 发布

Edith.Liu

最新推荐文章于 2023-02-22 16:23:29 发布

阅读量2.9k

点赞数

Ext.js项目专栏收录该内容

65 篇文章 1 订阅

订阅专栏

view

/**
 * Ext JS 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.
 * Ext.js提供了很多不同类型的表单域，同时也提供了完成的创建去创建一种新的表单类型。例如下面这种，下面这个例子就是
 * 怎么利用Ext.js提供的矿建穿件新的表单域。
 */
Ext.define('KitchenSink.view.form.CustomFields', {
    extend: 'Ext.form.Panel',
    xtype: 'form-customfields',


    store: {
        type: 'form-forum-posts'
    },

    title: 'Forum Search',
    height: 600,
    width: 600,
    layout: 'fit',
    items: [{
        scrollable: 'y',
        xtype: 'dataview',
        tpl: [
        //循环数组root节点
            '<tpl for=".">',
            '<div class="search-item">',
                '<h3><span>{lastPost:this.formatDate}<br>by {author}</span>',
                '<a href="http://sencha.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',
                '<p>{excerpt}</p>',
            '</div></tpl>',
        {
            formatDate: function(value) {
                return Ext.Date.format(value, 'M j, Y');
            }
        }],
        //第一次看到itemSelector
        //这是必需的设置. 简单的CSS选择器 (例如： div.some-class or span:first-child) 将被用来确定哪些节点为DataView工作。 itemSelector用来对应DOM节点记录。 因此，应该仅有一个根级别的元素，选择相匹配的每个记录。

        itemSelector: 'div.search-item',
        emptyText: '<div class="x-grid-empty">No Matching Threads</div>',
        store: 'form-forum-posts'
    }],

    dockedItems: [{
        dock: 'top',
        xtype: 'toolbar',
        items: {
            width: 400,
            fieldLabel: 'Search',
            labelWidth: 50,
            //会在输入text的出现X，想框架里面那个一样，原来是这个实例
            //这个部件是自定义的！
            xtype: 'searchfield',
            store: 'form-forum-posts'
        }
    }, {
        dock: 'bottom',
        xtype: 'pagingtoolbar',
        store: 'form-forum-posts',
        pageSize: 25,
        displayInfo: true,
        displayMsg: 'Topics {0} - {1} of {2}',
        emptyMsg: 'No topics to display'
    }],

    initComponent: function() {
        var me = this,
            store = me.store;

        if (!store.isStore) {
        //取store
            store = me.store = Ext.data.StoreManager.lookup(store);
        }

        // Seed the store with the first page
        store.loadPage(1);

        me.callParent();
    }
});

SearchField

Ext.define('Ext.ux.form.SearchField', {
    extend: 'Ext.form.field.Text',

    alias: 'widget.searchfield',
    //Ext.form.field.Text类下的triggers
    //triggers 触发器 对象中的键是触发器的唯一标识符。对象中的值是触发器的配置对象。
    triggers: {
        clear: {
            weight: 0,
            //更改css样式
            cls: Ext.baseCSSPrefix + 'form-clear-trigger',
            hidden: true,
            handler: 'onClearClick',
            scope: 'this'
        },
        search: {
            weight: 1,
            cls: Ext.baseCSSPrefix + 'form-search-trigger',
            handler: 'onSearchClick',
            scope: 'this'
        }
    },
    //这个属性？20151222
    hasSearch : false,
    paramName : 'query',

    initComponent: function() {
        var me = this,
            store = me.store,
            proxy;

        me.callParent(arguments);
        me.on('specialkey', function(f, e){
            if (e.getKey() == e.ENTER) {
                me.onSearchClick();
            }
        });

        if (!store || !store.isStore) {
            store = me.store = Ext.data.StoreManager.lookup(store);
        }

        // We're going to use filtering
        store.setRemoteFilter(true);

        // Set up the proxy to encode the filter in the simplest way as a name/value pair
        //编译简单的简直过滤配对
        proxy = me.store.getProxy();
        proxy.setFilterParam(me.paramName);
        proxy.encodeFilters = function(filters) {
            return filters[0].getValue();
        }
    },

    onClearClick : function(){
        var me = this,
            activeFilter = me.activeFilter;

        if (activeFilter) {
            me.setValue('');
            me.store.getFilters().remove(activeFilter);
            me.activeFilter = null;
            me.getTrigger('clear').hide();
            me.updateLayout();
        }
    },

    onSearchClick : function(){
        var me = this,
            value = me.getValue();

        if (value.length > 0) {
            // Param name is ignored here since we use custom encoding in the proxy.
            // id is used by the Store to replace any previous filter
            //参数名在这里被忽略了因为我们使用了自动以的代码编译proxy
            //仓库使用id去替换了之前的过滤
            me.activeFilter = new Ext.util.Filter({
                property: me.paramName,
                value: value
            });
            me.store.getFilters().add(me.activeFilter);
            me.getTrigger('clear').show();
            me.updateLayout();
        }
    }
});

Ext.baseCSSPrefix 这个基本的前缀适用于所有的Ext组件。
(Ext.baseCSSPrefix是前缀，因为Ext.js中很多cls用了同样的前缀,我推测可能在必要的情况下需要自定义设置，具体怎么用还需要实际操作)
为了配置这个属性，在框架加载之前需要使用Ext.buildSettings对象。如下：

Ext.buildSettings = {
    baseCSSPrefix : 'abc-'
};

或者也可以在组件进行渲染之前改变他

Ext.baseCSSPrefix = Ext.buildSettings.baseCSSPrefix = 'abc-';

这个会改变组件可能使用到的CSS类，并且需要重新编译SASS的$prefix(前缀)来变量匹配。
默认：‘x-’

triggers:object
触发器对象中的键是触发器的唯一标识符。对象中的值是触发器的配置对象。如下：

Ext.create('Ext.form.field.Text', {
    renderTo: document.body,
    fieldLabel: 'My Custom Field',
    triggers: {
        foo: {
            cls: 'my-foo-trigger',
            handler: function() {
                console.log('foo trigger clicked');
            }
        },
        bar: {
            cls: 'my-bar-trigger',
            handler: function() {
                console.log('bar trigger clicked');
            }
        }
    }
});

weight的值也可能是负值，为了定位自定义的触发器在默认的触发器（比如comboBox）之前

Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    fieldLabel: 'My Custom Field',
    triggers: {
        foo: {
            cls: 'my-foo-trigger',
            weight: -2, // negative to place before default triggers 在默认触发器之前
            handler: function() {
                console.log('foo trigger clicked');
            }
        },
        bar: {
            cls: 'my-bar-trigger',
            weight: -1, 
            handler: function() {
                console.log('bar trigger clicked');
            }
        }
    }
});

specialkey
Ext.form.field.Base类下
任何与导航相关的键（方向键、Tab键、回车键、退格键等）按下时触发。其他按键看Ext.util.KeyMap。可以根据 Ext.EventObject.getKey判断按下的是哪个键。
参数：specialkey( Ext.Editor this, Ext.form.field.Field , Ext.EventObject event, Object eOpts )
this:Ext.Editor Ext.form.field.Field是编辑器上的字段
event: Ext.EventObeject 事件对象
eOpts:Object :The options object passed to Ext.util.Observable.addListener.

var form = new Ext.form.Panel({
    ...
    items: [{
            fieldLabel: 'Field 1',
            name: 'field1',
            allowBlank: false
        },{
            fieldLabel: 'Field 2',
            name: 'field2',
            listeners: {
                specialkey: function(field, e){
                    // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
                    // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
                    if (e.getKey() == e.ENTER) {
                        var form = field.up('form').getForm();
                        form.submit();
                    }
                }
            }
        }
    ],
    ...
});