4

ExtJS 4を使用してアプリケーションを作成しています。このアプリケーションでは、フォームのテキストフィールドへの入力は常に大文字にする必要があります。

このために、変更イベントで関数を呼び出し、現在の値を大文字に変換して、次の方法でフィールドに戻すことができることがわかりました。

change: function(field, newValue){
   field.setValue(newValue.toUpperCase());
}

これは、ユーザーが小文字で文字を入力すると、それを大文字に変換してフィールドに戻すということです。この間、小文字から大文字へのわずかな遷移がユーザーに表示されます。つまり、ユーザーは小文字で文字を見ることができ、ミリ秒後には大文字になります。

問題は、この「遷移/変換」を小文字から大文字に回避し、ユーザーが何かを入力するとすぐに大文字で文字を直接表示する方法はありますか？

--style = text-transform：uppercase--を使用してみましたが、うまくいきませんでした。

どんな助けでも本当にありがたいです。

前もって感謝します。

4

4 に答える 4

8

--style = text-transform：uppercase--を使用してみましたが、うまくいきませんでした。

fieldStyle代わりに使用する必要があります。これがデモです。
乾杯！

于 2011-08-31T08:32:29.773 に答える
6

与えられた答えは、テキストを大文字で表示する場合にのみ機能しますが、値は同じままです。テキストフィールドを拡張してgetValue（）メソッドをオーバーライドし、表示だけでなく、オプションの構成フラグを使用して値を大文字で返します。

Ext.define('Dev.ux.UpperTextField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.uppertextfield',

    //configuration
    config: {
        uppercaseValue: true //defaults to true
    },

    constructor: function (config) {
        this.initConfig(config);
        this.callParent([config]);
    },

    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            fieldStyle: 'text-transform:uppercase',
        });

        me.callParent();
    },

    //overriden function
    getValue: function () {
        var val = this.callParent();
        return this.getUppercaseValue() ? val.toUpperCase() : val;
    }
});

次に、フォームにいくつかのテキストフィールドを簡単に追加できます。

{
     xtype: 'uppertextfield',
     uppercaseValue: false, //custom cfg available (default is true)
     name: 'Descricao',
     fieldLabel: 'Nome da Cidade',
     allowBlank: false,
     enforceMaxLength: true,
     maxLength: 80
},

EXT4.2.1で動作します。

于 2014-05-01T20:31:58.000 に答える
0

プラグインでもできます。

{
    xtype: 'textfield',
    plugins: ['uppertextfield']
}

これをExtJS4.2.1のプラグインとして使用する

Ext.define('App.plugin.UpperTextField', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.uppertextfield',

    init: function (cmp) {
        Ext.apply(cmp, {
            fieldStyle: (cmp.fieldStyle ? cmp.fieldStyle + ';' : '') + 'text-transform:uppercase',
            getValue: function() {
                var val = cmp.__proto__.getValue.apply(cmp, arguments);
                return val && val.toUpperCase ? val.toUpperCase() : val;
            }
        });
    }
});

インスピレーション：https ：//www.sencha.com/forum/showthread.php？94599-Uppercase-TextField-plugin＆p = 522068＆viewfull = 1＃post522068

PS：プロトタイプでgetValueを呼び出さなければなりませんでした。cmpでgetValueを呼び出すと、再帰的にそれを継続し、終了することはありません。プラグインを介してコンポーネントのgetValueメソッドを変更する方法についての提案を受け付けています。

于 2015-11-01T10:13:06.253 に答える
0

ExtJS4.2で動作します

テキストフィールドに大文字のみを入力する場合は、ベーステキストフィールドを拡張してフィールドスタイルを大文字に変更し、リスナーをアタッチして、テキストが大文字に変更されたときに生の値を更新します。

//新しいカスタムテキストフィールドを定義します

Ext.define('IN.view.item.UpperCaseTextField', {
    extend: 'Ext.form.field.Text',
    alias : 'widget.myUpperCaseTextField',
    fieldStyle: {
        textTransform: "uppercase"
    },
    initComponent: function() {
        this.callParent(arguments);
    },
    listeners: {
        change: function (obj, newValue) {
            console.log(newValue);
            obj.setRawValue(newValue.toUpperCase());
        }
     }
});

//エイリアスを使用してビュー定義で新しく作成されたカスタムテキストフィールドを使用します

xtype: 'form',
 items: [
  {
   xtype: 'myUpperCaseTextField',
   itemId: 'itemNumber',
   name : 'item',
   allowBlank: false,
   msgTarget: 'side',
   fieldLabel: 'Item Number',
   size: 11,
   maxLength: 10
  },


 ]
于 2017-08-08T13:17:04.193 に答える