1

Ext フォーラムにはかなりの数の解決策がありますが、私はどれも機能させることができませんでした。マイナーなものが欠けているようです。

コンボボックスを最初に作成したときに、そのコンテンツに合わせてサイズを変更する必要があります。コンテンツが変更されたときにサイズを変更することを心配する必要はありません。

Extjs 3.2 を使用した実際の例はありますか?

現在のコード:

var store = new Ext.data.ArrayStore({
    fields: ['view', 'value', 'defaultselect'],
    data: Ext.configdata.dataCP
});

comboCPU = new Ext.form.ComboBox({
    tpl: '<tpl for="."><div class="x-combo-list-item"><b>{view}</b><br /></div></tpl>',
    store: store,
    displayField: 'view',
    width: 600,
    typeAhead: true,
    forceSelection: true,
    mode: 'local',
    triggerAction: 'all',
    editable: false,
    emptyText: 'empty text',
    selectOnFocus: true,
    listeners: { select: AdjustPrice, change: AdjustPrice, beforeselect: function (combo, record, index) { return ('false' == record.data.disabled); } },
    applyTo: 'confelement'
});

width: 600 を削除して minListWidth: 600 に置き換えてみましたが、結果は次のようになり、問題は解決しませんでした。 代替テキスト http://img28.imageshack.us/img28/7665/4272010105134am.png

4

4 に答える 4

1

次のことを試してください。

  1. 最も文字数の多いリスト ボックス オプションを決定する
  2. div を作成し、最も多くの文字でオプションを設定します
  3. この div を本文に追加します
  4. div の clientWidth を取得する

以下のコードは ExtJs 3.2 で動作します!

myStore = new Ext.data.Store({
 ...
listeners : {
            load: function() {
                var maxValue = "";
                var charLen = 0, maxCharLen = 0;
                var maxListWidth = 300;

                /**
                 * This is a work-around since the 'listWidth' property
                 * does not accept any values that would simulate auto-resize
                 * in reference to the category with the most characters.
                 */
                this.data.each(function(item, index, totalItems ) {
                    var nameValue = item.data['name']; // 'name' is the field name

                    if(nameValue == null || nameValue == ''){
                        // do nothing
                    }else {
                        charLen = nameValue.length;
                        if(charLen > maxCharLen){
                            maxCharLen = charLen;
                            maxValue = nameValue;
                        }
                    }
                });

                if(maxValue != ""){
                    var divEl = document.createElement('div');
                    divEl.id = 'tempEl';
                    divEl.style.display = "inline";
                    divEl.className = "x-combo-list";
                    divEl.innerHTML = maxValue;

                    document.body.appendChild(divEl);

                    // check if appended
                    divEl = document.getElementById('tempEl');
                    if(divEl) {
                        var divWidth = divEl.clientWidth;
                        if(divWidth == 0 ) {
                            divEl.style.display = "inline-block";
                            divWidth = divEl.clientWidth;
                        }

                        // the allocated width for the scrollbar at side of the list box
                        var scrollbarWidth = 30;

                        // make sure that column width is not greater than
                        if((divWidth + scrollbarWidth) > maxListWidth) {
                            maxListWidth = divWidth + scrollbarWidth;
                            myCombo.listWidth = maxListWidth; 
                        }
                        document.body.removeChild(divEl);
                    }
                }
            }
});

var myCombo = new fm.ComboBox({
 ...
});
于 2012-02-10T04:25:18.997 に答える
0

autoWidth: true を試してください

幅パラメータを削除します

于 2010-04-27T20:22:45.990 に答える
0

width: 600正しいので、投稿した内容からは明らかではない他の問題が発生している必要があります。構成を削除してapplyTo、代わりに配置renderTo: Ext.getBody()して、要素への適用方法に関係があるかどうかを確認することもできます。幅に影響を与える可能性のあるコードが他にないのでしょうか?

于 2010-04-27T20:51:21.280 に答える