ExtJS 4 - Как отобразить шаблон, ширина которого больше ширины поля со списком? - PullRequest
Новая
       21

ExtJS 4 - Как отобразить шаблон, ширина которого больше ширины поля со списком?

1 голос
/ 23 сентября 2011

enter image description here

У меня есть поле со списком, в котором значения отображаются в шаблоне.

Теперь я хочу, чтобы ширина шаблона была больше ширины поля со списком, и поэтому я использую matchFieldWidth: false, как указано в ссылке - Ширина выпадающего списка ExtJS ComboBox шире ширины поля ввода?

Но когда я это делаю, в списке значений не отображается полоса прокрутки, благодаря которой пользователь может видеть только первые два значения.Полный список отображается, как только matchFieldWidth: false удаляется, но затем ширина шаблона уменьшается до ширины поля со списком, а это не то, что нужно.

Ниже мой код: 

xtype: 'combo',
id: 'testId',
name: 'testName',
displayField: 'vslCd',
valueField: 'vslCd',
fieldLabel: 'Vessel Code',
store: storeVesselCodeVar,
matchFieldWidth: false,
queryMode: 'remote',
listConfig: {
    loadingText: 'Loading...',
    width: 400,
    autoHeight:true,
    getInnerTpl: function () {
        return '<table><tr><td height="5"></td></tr><tr valign="top"><td>Vessel Code:{vslCd}</td></tr><tr><td height="2"></td></tr><tr valign="top"><td>Vessel Name:{vslNm}</td></tr><tr><td height="5"></td></tr></table>';
    }
}

Может кто-нибудь подсказать, в чем может быть причина этого и как решить эту проблему?Прилагается скриншот, связанный с проблемой.

Я использую этот ExtJS4 и IE9.

Ответы [ 2 ]

2 голосов
/ 23 сентября 2011

Это похоже на ошибку в Ext 4.0.2a.Когда для свойства matchFieldWidth установлено значение false, раскрывающийся список не имеет размера вообще.

см. Picker.js # alignPicker: 

        if (me.matchFieldWidth) {
            // Auto the height (it will be constrained by min and max width) unless there are no records to display.
            picker.setSize(me.bodyEl.getWidth(), 
                picker.store && picker.store.getCount() ? null : 0);
        }
        // note: there is no other occurence of setSize in this method

, если для matchFieldWidth указано значение false, picker.setSize никогда не вызывается и сборщик (= выпадающий список) никогда не захватывается.

Возможным решением является вызов setSize в любом случае, и только не применять ширину, если matchFieldWidth=true. 

        picker.setSize(me.matchFieldWidth ? me.bodyEl.getWidth() : null, 
                        picker.store && picker.store.getCount() ? null : 0);

Примечание: setSize() будет применять настроенную maxWidth или,maxHeight, если переданное значение равно 'null'.

Возможно, лучше применить патч без изменения источника Ext. 

Ext.require('Ext.form.field.Picker', function() {
    var Picker = Ext.form.field.Picker;
    Picker.prototype.alignPicker = Ext.Function.createSequence(
               Picker.prototype.alignPicker, function(width, height) {
                    if(this.isExpanded && !this.matchFieldWidth) {
                        var picker = this.getPicker();
                        picker.setSize(null, picker.store && 
                              picker.store.getCount() ? null : 0);
                    }
    })
});
1 голос
/ 23 сентября 2011

Мне удалось решить эту проблему, добавив высоту к шаблону. Вот окончательный код: 

xtype: 'combo',
id: 'testId',
name: 'testName',
displayField: 'vslCd',
valueField: 'vslCd',
fieldLabel: 'Vessel Code',
store: storeVesselCodeVar,
matchFieldWidth: false,
queryMode: 'remote',
listConfig: {
    loadingText: 'Loading...',
    width: 400,
    height:300,
    autoHeight:true,
    getInnerTpl: function () {
        return '<table><tr><td height="5"></td></tr><tr valign="top"><td>Vessel Code:{vslCd}</td></tr><tr><td height="2"></td></tr><tr valign="top"><td>Vessel Name:{vslNm}</td></tr><tr><td height="5"></td></tr></table>';
    }
}

Надеюсь, это кому-нибудь поможет.

...