Подсветить кнопку по умолчанию в ExtJS (3.x) MessageBox - PullRequest
Новая
       25

Подсветить кнопку по умолчанию в ExtJS (3.x) MessageBox

5 голосов
/ 19 июня 2011

Есть ли Ext-санкционированный способ выделения кнопки по умолчанию (которая вызывается нажатием Enter) в Ext.MessageBox?

Обратите внимание, что я не хочу делать это, фокусируя кнопку, когдаОтображается MessageBox (в случае диалогового окна «Подсказка» я хочу, чтобы элемент ввода имел фокус).

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

Спасибо.

Ответы [ 3 ]

7 голосов
/ 25 октября 2011

В ExtJs 4 вы можете установить кнопку по умолчанию следующим образом: 

Ext.MessageBox.defaultButton = buttonIndex;

Где 'buttonIndex' - индекс кнопки в диалоговом окне. Это необходимо сделать перед вызовом Ext.MessageBox.Show.

4 голосов
/ 20 июня 2011

Короче ... нет. Ext в настоящее время не предоставляет метода подсветки кнопки в любом из компонентов Ext.MessageBox, в любом случае, через параметр конфигурации.

Однако в зависимости от сценария существуют способы. Например, если вы используете Ext.MessageBox.show() (который вы можете использовать для всех окон сообщений), то вы можете сделать что-то вроде ... 

new Ext.Msg.show({
   title: 'Test',
   msg: 'A sample message box with a button marked as default',
   buttons: { ok: '<b>Submit</b>', cancel: 'Cancel' },
   fn: function(btn) {
       if(btn == 'ok') {
          //do something
       }
   },
   icon: Ext.Msg.WARNING
}

Все, что мы сделали, это добавили теги <b> к одной из кнопок в нашей конфигурации, это бы показало это жирным шрифтом.

Другой способ, который вы упомянули, это добавить собственный класс и пометить кнопку цветом текста, вы можете даже просто добавить класс, как мы сделали с тегами <b> выше, чтобы упростить его.

buttons: { ok: '<span class="highlighted-option">Submit</span>', cancel: 'Cancel' },

Кроме этого подхода или без расширения класса Ext.MessageBox, другого способа достижения этого нет.

1 голос
/ 20 июня 2011

У Jaitsu есть лучший ответ, но в случае, если это может быть полезно кому-то еще ... вот способ сделать это со стилями. Тот же трюк можно применить к любой другой кнопке (например, кнопки окна).

Добавьте это к вашему css: 

.x-btn-default td.x-btn-mc {
  outline: 1px dotted black;
}

Затем определите кнопки следующим образом: 

  ...
  ,buttons: [
    {
      text: 'Ok',
      ,handler: handleFn
      ,cls: 'x-btn-default'
    },{
      text: 'Cancel',
      ,handler: handleFn
    }
  ]
  ,...
...