You found a bug! We've classified it as EXTJS-16828 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    67
    Vote Rating
    1
    pnagboth is on a distinguished road

      0  

    Default Can we have scrollbars for Ext.MessageBox.confirm?

    Can we have scrollbars for Ext.MessageBox.confirm?


    Hi,

    We are using Extjs 4.2.2. We display Ext.MessageBox.confirm when user selects a set of rows and clicks delete. In the message, we list all the user selected names. If the user selects 100's of names, the text is cutting off. We want to have the vertical scrollbar when the message is large. I tried giving autoScroll to true and autoShow to true and also setting external height of 400. But still message is cutting off. Code is below. How do we get the scrollbars for confirmation message windows?

    Thanks for your help!!

    Code:
    var messageVal = 'Are you sure you want to permanently delete the selected Names "abcd11, abcdefg_test_maxim_char0, abcdefg_test_maxim_char1, abcdefg_test_maxim_char2, abcdefg_test_maxim_char3, abcdefg_test_maxim_char4, abcdefg_test_maxim_char5, abcdefg_test_maxim_char6, abcdefg_test_maxim_char7, abcdefg_test_maxim_char8, abcdefg_test_maxim_char9, abcdefg_test_maxim_chars0, abcdefg_test_maxim_chars1, abcdefg_test_maxim_chars2, abcdefg_test_maxim_chars3, abcdefg_test_maxim_chars4, abcdefg_test_maxim_chars5, abcdefg_test_maxim_chars6, abcdefg_test_maxim_chars7, abcdefg_test_maxim_chars8, abcdefg_test_maxim_chars9, abcdefg_test_maxim_chars_0, abcdefg_test_maxim_chars_1, abcdefg_test_maxim_chars_2, abcdefg_test_maxim_chars_3, abcdefg_test_maxim_chars_4, abcdefg_test_maxim_chars_5, abcdefg_test_maxim_chars_6, abcdefg_test_maxim_chars_7, abcdefg_test_maxim_chars_8, abcdefg_test_maxim_chars_9, abcdefg_test_max_chars_2, abcdefg_test_maxim_char0, abcdefg_test_maxim_char250, abcdefg_test_maxim_char260, abcdefg_test_maxim_char270, abcdefg_test_maxim_char0, abcdefg_test_maxim_char50, abcdefg_test_maxim_char60, abcdefg_test_maxim_char10, abcdefg_test_maxim_char20, abcdefg_test_maxim_char30, abcdefg_test_maxim_char40, abcdefg_test_maxim_char70, abcdefg_test_maxim_char80, abcdefg_test_maxim_char90, abcdefg_test_maxim_char100, abcdefg_test_maxim_char110, abcdefg_test_maxim_char120, abcdefg_test_maxim_char130, abcdefg_test_maxim_char140, abcdefg_test_maxim_char150, abcdefg_test_maxim_char160, abcdefg_test_maxim_char170, abcdefg_test_maxim_char180, abcdefg_test_maxim_char190, abcdefg_test_maxim_char200, abcdefg_test_maxim_char210, abcdefg_test_maxim_char220, abcdefg_test_maxim_char230, abcdefg_test_maxim_char240, abcdefg_test_maxim_char250, abcdefg_test_maxim_char290, abcdefg_test_maxim_char300, abcdefg_test_maxim_char310, abcdefg_test_maxim_char320, abcdefg_test_maxim_char330, abcdefg_test_maxim_char340, abcdefg_test_maxim_char350, abcdefg_test_maxim_char360, abcdefg_test_maxim_char370, abcdefg_test_maxim_char380, abcdefg_test_maxim_char390, abcdefg_test_maxim_char400"?';
    Ext.MessageBox.confirm({
                    title: 'Delete Names',
                    cls:'delete-cls',
                    padding:'0 10 10 10',
    		autoScroll: true,	
                    height: 400,					
                    autoShow: true,
                    msg: messageVal,
                    fn: this.testDeleteAction,
                    buttons: Ext.Msg.YESNO,
                    scope:this
    });
    [HTML]
    <style>
    .delete-cls .x-form-display-field{
    word-wrap: break-word;
    white-space: normal;
    width:400px;
    }
    </style>
    [/HTML

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,711
    Vote Rating
    88
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Seems like a bug. It works as you require in 5.x:
    https://fiddle.sencha.com/#fiddle/iii

    I haven't figured out a way to make it work that way in 4.x. I'll move this thread to the Bugs forum.


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  3. #3
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,711
    Vote Rating
    88
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    67
    Vote Rating
    1
    pnagboth is on a distinguished road

      1  

    Default


    Thanks!!

    I found a way to get scrollbars for Message Box in Extjs 4.2.2

    Code:
    var messageVal = 'Are you sure you want to permanently delete the selected Names "abcd11, abcdefg_test_maxim_char0, abcdefg_test_maxim_char1, abcdefg_test_maxim_char2, abcdefg_test_maxim_char3, abcdefg_test_maxim_char4, abcdefg_test_maxim_char5, abcdefg_test_maxim_char6, abcdefg_test_maxim_char7, abcdefg_test_maxim_char8, abcdefg_test_maxim_char9, abcdefg_test_maxim_chars0, abcdefg_test_maxim_chars1, abcdefg_test_maxim_chars2, abcdefg_test_maxim_chars3, abcdefg_test_maxim_chars4, abcdefg_test_maxim_chars5, abcdefg_test_maxim_chars6, abcdefg_test_maxim_chars7, abcdefg_test_maxim_chars8, abcdefg_test_maxim_chars9, abcdefg_test_maxim_chars_0, abcdefg_test_maxim_chars_1, abcdefg_test_maxim_chars_2, abcdefg_test_maxim_chars_3, abcdefg_test_maxim_chars_4, abcdefg_test_maxim_chars_5, abcdefg_test_maxim_chars_6, abcdefg_test_maxim_chars_7, abcdefg_test_maxim_chars_8, abcdefg_test_maxim_chars_9, abcdefg_test_max_chars_2, abcdefg_test_maxim_char0, abcdefg_test_maxim_char250, abcdefg_test_maxim_char260, abcdefg_test_maxim_char270, abcdefg_test_maxim_char0, abcdefg_test_maxim_char50, abcdefg_test_maxim_char60, abcdefg_test_maxim_char10, abcdefg_test_maxim_char20, abcdefg_test_maxim_char30, abcdefg_test_maxim_char40, abcdefg_test_maxim_char70, abcdefg_test_maxim_char80, abcdefg_test_maxim_char90, abcdefg_test_maxim_char100, abcdefg_test_maxim_char110, abcdefg_test_maxim_char120, abcdefg_test_maxim_char130, abcdefg_test_maxim_char140, abcdefg_test_maxim_char150, abcdefg_test_maxim_char160, abcdefg_test_maxim_char170, abcdefg_test_maxim_char180, abcdefg_test_maxim_char190, abcdefg_test_maxim_char200, abcdefg_test_maxim_char210, abcdefg_test_maxim_char220, abcdefg_test_maxim_char230, abcdefg_test_maxim_char240, abcdefg_test_maxim_char250, abcdefg_test_maxim_char290, abcdefg_test_maxim_char300, abcdefg_test_maxim_char310, abcdefg_test_maxim_char320, abcdefg_test_maxim_char330, abcdefg_test_maxim_char340, abcdefg_test_maxim_char350, abcdefg_test_maxim_char360, abcdefg_test_maxim_char370, abcdefg_test_maxim_char380, abcdefg_test_maxim_char390, abcdefg_test_maxim_char400"?';
    var msgBox = new Ext.window.MessageBox();
    msgBox.autoShow=true;
    msgBox.autoScroll=true;
    msgBox.overflowY='auto';
    msgBox.confirm({
        title: 'Delete Names',
        cls: 'delete-cls',
        padding: '0 10 10 10',
        autoScroll: true,
        height: 400,
        autoShow: true,
        msg: messageVal,
        fn: this.testDeleteAction,
        buttons: Ext.Msg.YESNO,
        scope: this
    });

Thread Participants: 1