Применять loadMask () к одному элементу в extjs? - PullRequest
Новая
       38

Применять loadMask () к одному элементу в extjs?

12 голосов
/ 21 июля 2011

Как применить loadMask только к одному элементу, а не ко всей ширине-высоте браузера?

по умолчанию
enter image description here



здесь маскируется только один элемент, и блок сообщений находится в центре, внутри этого элемента, а не на всем экране ...
enter image description here


есть идеи?

EDIT:

@ Молекула, спасибо, но это когда данные загружаются из какого-то источника, что мне нужно: 

{
    xtype:"button",
    text:"Alert",
    handler: function(){

        Ext.Msg.show({
        title:'Save Changes?',
        msg: 'You are closing ?',
        buttons: Ext.Msg.YES,
        setLoading: // here somehow only mask parent element, and position alertBox...
    }

}

1 Ответ

29 голосов
/ 21 июля 2011

Каждый компонент имеет свое собственное свойство loadMask.Вы можете использовать его, позвонив по номеру YourComponent.setLoading.Вот скрипка , чтобы проиллюстрировать то, о чем я говорю.

Другой способ - использовать new Ext.LoadMask(YourComponent.el, {msg:"Please wait..."});.Вы можете посмотреть на использование в моей скрипке .

ОБНОВЛЕНИЕ

Вот пример кода, который показывает, как применить ExtJS4 loadMask и MessageBox к указанному виджету

Ext.create('Ext.panel.Panel', {
    width: 600,
    height: 400,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        width: 400,
        id: 'west-region-container',
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',
        xtype: 'panel',
        layout: 'fit',
    }],
    renderTo: Ext.getBody()
});
var myMask = new Ext.LoadMask(Ext.getCmp('west-region-container').el, {useMsg: false});
myMask.show();
var msg = Ext.Msg.show({
    title:'Save Changes?',
    msg: 'Bla-Bla',
    buttons: Ext.Msg.OK,
    modal: false
});
msg.alignTo(Ext.getCmp('west-region-container').el, 'c-c');

А вот пример "попробуй сам" .

...