8

入力したテキストをクリアするために、テキストフィールド内に X ボタン (テキストフィールドの右側に x) を実装したいと考えています。この機能を持つ多くの extjs アプリケーションを見てきました。どうすればそれを行うことができますか？提案やコメントをいただければ幸いです...ありがとう

それはこのように見えます...

ここに画像の説明を入力

4

5 に答える 5

11

Ext.form.field.Triggerを使用する必要があります。これがその例です

Ext.define('Ext.ux.CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customtrigger',
    initComponent: function () {
        var me = this;

        me.triggerCls = 'x-form-clear-trigger'; // native ExtJS class & icon

        me.callParent(arguments);
    },
    // override onTriggerClick
    onTriggerClick: function() {
        this.setRawValue('');
    }
});

Ext.create('Ext.form.FormPanel', {
    title: 'Form with TriggerField',
    bodyPadding: 5,
    width: 350,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'customtrigger',
        fieldLabel: 'Sample Trigger',
        emptyText: 'click the trigger'
    }]
});

テストを簡単にするために、JSFiddleを次に示します。

于 2012-11-27T17:29:27.873 に答える
3

これはCSSで私にとってうまくいくものです：

CSS

    .x-form-clear {
        background-image: url('../../resources/themes/images/default/form/clear-trigger.gif');
        background-position: 0 0;
        width: 17px;
        height: 22px;
        border-bottom: 1px solid #b5b8c8;
        cursor: pointer;
        cursor: hand;
        overflow: hidden;
    }

    .x-form-clear-over {
        background-position: -17px 0;
        border-bottom-color: #7eadd9;
    }

    .x-form-clear-click {
        background-position: -68px 0;
        border-bottom-color: #737b8c;
    }

クラス

Ext.define('Ext.ux.form.field.Clear', {
    extend: 'Ext.form.field.Trigger',

    alias: 'widget.clearfield',

    triggerBaseCls: 'x-form-clear',

    onTriggerClick: function() {
        this.setValue();
    }
});

使用法

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [
        Ext.create('Ext.ux.form.field.Clear', {
            fieldLabel: 'Clear Field',
            cls: 'clear-trigger'
        })
    ]
})
于 2012-11-27T18:37:16.863 に答える
2

Ext.form.field.TextExtjs 5.0 以降では with トリガーを使用できます。新しい型を定義する必要はありません。

var textfield = Ext.create('Ext.form.field.Text', {
    triggers: {
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function () {
                this.setValue('');
            }
        }
   }
});

トリガーのハンドラーのスコープはExt.form.field.Textコンポーネントです。

複数のトリガーを持つことができ、MVVM モデルも使用できます。例えば：

var textfield = Ext.create('Ext.form.field.Text', {
    triggers: {
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function () {
                this.setValue('');
            }
        },
        search: {
            cls: 'x-form-search-trigger',
            handler: 'onSearch'
        }
   }
});

トリガーは、オブジェクトを持つコンポーネントのコントローラーで定義されてsearchいるハンドラー関数を使用します。onSearchExt.form.field.Text

于 2016-12-21T19:28:12.643 に答える