1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    12
    Vote Rating
    0
    masm is on a distinguished road

      0  

    Default Unanswered: Simple dialog window in Ext JS 4

    Unanswered: Simple dialog window in Ext JS 4


    Is there in Ext JS 4 something similar to jQuery Dialog window - ability to pop up custom div element which will behave like dialog window? I want to rid of title bar, close button and border.

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      0  

    Default


    May be MessageBox can help you. Otherwise you can build you custom panel dialog.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    12
    Vote Rating
    0
    masm is on a distinguished road

      0  

    Default


    Unfortunately MessageBox isn't an option - it behaves the same way as Window, but additionally provides handy stuff typical for MessageBoxes (buttons, messages, etc).

    Not aware about custom panel dialog approach. Is it possible to inherit all popup features and behavior from Ext.window.Window and at the same time completely override look and feel? Could you provide any links to samples?

    Anyway, I think it's easier manipulate *Cls-like properties (baseCls, bodyCls, etc.) to achieve completely custom UI, but it's the last line of defense in my case.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      0  

    Default


    If you want dialog window you should create Ext.window with properties "modal: true"
    Code:
     Ext.define('confirmUpdatePanel', {
        extend: 'Ext.window.Window',
        
        id: 'confirmWindow',
        border: 0,
        height: 142,
        width: 270,
        resizable: false,
        modal: true,
        layout: {
            type: 'fit'
        },
        closable: false,
        title: 'Login',
        initComponent: function() {
            var me = this;
            Ext.applyIf(me, {
                items: [
                    {
                     ...
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    });
    For additional functionality use Form in "items" section where you can add buttons, checkboxes and other fields.
    Unfortunately you can't override *Cls for MessageBox (e.g.), because it will affect to other fields in your main form.

  5. #5
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by icemanovich View Post
    If you want dialog window you should create Ext.window with properties "modal: true"
    Code:
     Ext.define('confirmUpdatePanel', {
        extend: 'Ext.window.Window',
        
        id: 'confirmWindow',
        border: 0,
        height: 142,
        width: 270,
        resizable: false,
        modal: true,
        layout: {
            type: 'fit'
        },
        closable: false,
        title: 'Login',
        initComponent: function() {
            var me = this;
            Ext.applyIf(me, {
                items: [
                    {
                     ...
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    });
    For additional functionality use Form in "items" section where you can add buttons, checkboxes and other fields.
    Unfortunately you can't override *Cls for MessageBox (e.g.), because it will affect to other fields in your main form.

    Just a small nit, constructors should be named with a Capital letter.