Hello,

I created panel that contain many checkbox, radio.
I would like to disable / enable all checkbox in panel by extend panel method.
I apply a code from this topic https://www.jeasyui.com/forum/index.php?topic=3038.0 but it does'n work.

Here is modified code

Code:

$.extend($.fn.panel.methods, {
            enableCbx: function(jq) {
                return jq.each(function() {
                    var t = $(this);
                    t.find('input')._propAttr('enabled', 'enabled');
                    var plugins = ['checkbox', 'radiobutton'];
                    for (var i = 0; i < plugins.length; i++) {
                        var plugin = plugins[i];
                        var r = t.find('.' + plugin + '-f');
                        if (r.length && r[plugin]) {
                            r[plugin]('enable');
                        }
                    }
                })
            },
            disableCbx: function(jq) {
                return jq.each(function() {
                    var t = $(this);
                    t.find('input')._propAttr('disabled', 'disabled');
                    var plugins = ['checkbox', 'radiobutton'];
                    for (var i = 0; i < plugins.length; i++) {
                        var plugin = plugins[i];
                        var r = t.find('.' + plugin + '-f');
                        if (r.length && r[plugin]) {
                            r[plugin]('disable');
                        }
                    }
                })
            }
        })

Could your please advice where I missing? Thank you.

usually, I used <table> or <div> column to separate left, right side by side.

Thank you sir. 

for complete. I added below code for prevent display x button when load success but no item select.

Code:

onLoadSuccess: function() { 
		var v = $(this).combobox('getValue');
		if (v) {
			$(this).combobox('getIcon', 0).css('visibility', 'visible');
		} else {
			$(this).combobox('getIcon', 0).css('visibility', 'hidden');
		}
	}

From

https://www.jeasyui.com/forum/index.php?topic=3786.0

I tried that code with combobox.

Clear icon appear when use arrow key when select item option.
But when select item with mouse. Clear icon does not show.


How to bind change event instead keyup?

Thank you for advice.

I got it! very easy

Code:

function addPanel() {
            
            $('<div id="pp"></div>').appendTo('#Div1');
            
            $('#pp').panel({
                width: 500,
                height: 150,
                title: 'My Panel',
                tools: [{
                    iconCls: 'icon-add',
                    handler: function() { alert('new') }
                        }, {
                    iconCls: 'icon-save',
                    handler: function() { alert('save') }
                    }]
                });
}

It's sound like easy but I can't do that. 

Could you please advice? Thank you.

Code:

<div id="Div1">
    
</div>

<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addPanel()">Add Panel</a>

<script>
function addPanel() {

            var pp = $('#pp').panel({
                width: 500,
                height: 150,
                title: 'My Panel',
                tools: [{
                    iconCls: 'icon-add',
                    handler: function() { alert('new') }
                        }, {
                    iconCls: 'icon-save',
                    handler: function() { alert('save') }
                    }]
                });

            $("#Div1").append(pp);
                 
  }
</script>

Thank you sir. But I mean toggle icon when click button.
Finally back to use Div instead array.

Code:

    <div class="easyui-panel" title="Custom Panel Tools" style="width:700px;height:400px;padding:10px;"
            data-options="iconCls:'icon-save',closable:true,tools:'#tt'">
    </div>
    <div id="tt">
        <a id="btnadd" href="javascript:void(0)" class="icon-add" onclick="toggleIcon(this)"></a>
        <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
        <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
    </div>
    
    <script type="text/javascript">
        function toggleIcon(obj) {

            var className = obj.className;

            if (~className.indexOf('icon-add')) {
                obj.className = className.replace('icon-add', 'icon-edit');
            } else {
                obj.className = 'icon-add panel-tool-a';
            }
        }
    </script>

From documentation. If I create tool by array. Is possible to add tool tip and toggle icon when click on button?
Could you please advice?

Thank you, It's work great.

When select menu item, a width of each menu item changed by width of text option.

I prefer the same width of each menu item.

Could you please advice how to set fix width?

Thank you very much.

Thank you, Sir. But that way not work.

I set top & left of window instead and it look cool.

Code:

<div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true,fit:true,modal:true" style="padding:10px; top:10px; left:10px;">

Full code

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Texbox Multiline Height 100%</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <div class="easyui-tabs" data-options="fit:true,pill:true" >

        <div title="Main Tab 1" style="position: relative; padding:10px;">
            <div class="easyui-tabs" data-options="fit:true,plain:true,tabPosition:'left'">
                <div title="Sub Tab 1" style="padding:10px;">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
                </div>
                <div title="Sub Tab 2" style="padding:10px;">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
                </div>
                <div title="Sub Tab 3" style="padding:10px;">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
                </div>
            </div>
            <div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true,fit:true,modal:true" style="padding:10px; top:10px; left:10px;">
                This inline window use together by Sub Tab 1, 2, 3
            </div>
        </div>
        <div title="Main Tab 2" style="padding:10px;">
        </div>
    </div>
</body>
</html>

set div position relative with padding 10px made a new problem.
window not center in a parent.

Could you help? Please.

OK, I got It. Set div style position to relative.

Code:

<div title="Main Tab 1" style="position:relative,padding:10px;">

Could you please advice how to place inline window into tab panel with nest tab like attached picture?

I tried this code but not work.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test Texbox Multiline Height 100%</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:350px">
        <div title="Main Tab 1" style="padding:10px;">
            <div class="easyui-tabs" data-options="fit:true,plain:true">
                <div title="Sub Tab 1" style="padding:10px;">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open Inline Window</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close Inline Window</a>
                </div>
                <div title="Sub Tab 2" style="padding:10px;">Content 2</div>
                <div title="Sub Tab 3" style="padding:10px;">Content 3</div>
            </div>
            <div id="w" class="easyui-window" data-options="title:'Inline Window',inline:true" style="width:690px;height:300px;padding:10px">
                This window should stay inside Main Tab 1 but cover Sub Tab 1,2,3
            </div>
        </div>
        <div title="Main Tab 2" style="padding:10px;">
        </div>
    </div>
</body>
</html>

Thank you, Its work great!