Print Page - resizable drop-down panel for combo elements

Title: resizable drop-down panel for combo elements
Post by: mzeddd on May 13, 2014, 12:40:26 AM

Hi,

Sometimes I can see situation when text length for some items in combo elements is to big to fit panel size.
Due to this fact horisontal scroll bar appears.

I think would be good to have the following options to solve this issue:
- Add new parameter maxPanelWidth (in addition to panelWidth) and let panel width to vary between panelWidth and maxPanelWidth.
In this case by default width of panel will be equal to panelWidth. But in case if text is a little bigger than panel could fit then panel should be extanded "a little" to fit this text (but not more than maxPanelWidth)

- Allow user to resize panel. i.e. change change panelWidth/panelHeight using mouse like we resize windows.
In this case combo should of course remember new parameters.

Title: Re: resizable drop-down panel for combo elements
Post by: stworthy on May 14, 2014, 06:21:55 PM

It is easy to make the drop-down panel resizable. Here is the extended method to achieve this functionality.

Code:

$.extend($.fn.combo.methods,{
    resizablePanel: function(jq){
       return jq.each(function(){
              var state = $(this).data('combo');
              var p = $(this).combo('panel');
              p.panel('panel').resizable({
                     onStartResize:function(e){
                            if (state.proxy){state.proxy.remove();}
                            state.proxy = $('<div></div>').appendTo('body');
                            state.proxy.css({
                                   position:'absolute',
                                   background:'#fafafa',
                                   border:'1px dashed red',
                                   filter:'alpha(opacity=5)',
                                   opacity:0.5,
                                   zIndex: 9999999999,
                                   left: e.data.left,
                                   top: e.data.top
                            });
                            state.proxy._outerWidth(e.data.width)._outerHeight(e.data.height);
                     },
                     onResize:function(e){
                            state.proxy.css({
                                   left:e.data.left,
                                   top:e.data.top
                            })
                            state.proxy._outerWidth(e.data.width)._outerHeight(e.data.height);
                            return false;
                     },
                     onStopResize:function(e){
                            p.panel('resize', {
                                   width:e.data.width,
                                   height:e.data.height
                            });
                            state.proxy.remove();
                            state.proxy = undefined;
                     }
              })
       })
    }
})

Usage example:

Code:

$('#c1').combobox('resizablePanel');
$('#c2').combogrid('resizablePanel');

Title: Re: resizable drop-down panel for combo elements
Post by: mzeddd on May 15, 2014, 05:24:13 AM

Hi stworthy!

Thanks!

Is it possible to turn it from method to option (true/false)?
And make it available for everybody with next version?

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mzeddd on May 13, 2014, 12:40:26 AM