I tried this, my licensed download is available at https://www.jeasyui.com/download/d/download.php?link=xxxxxxxxxxxxx
However the problem remains after upgrade to my latest licensed version. I notice the version at my download link is 1.9.6. However the latest free version is 1.9.7. Might that be the reason? Can I then install the free over the licensed?

Can I have code snippet that fixes this automatically for everywhere its used? It seems like the component should know East and West should not overlap. The same way North and South does not overlap. Please advice.

I would like to let the user change skin by selecting a theme from combo box. I have fond posts about changing the CSS reference via giving it an id. However it’s probably not the correct solution in my case. The ribbon menu pictures gets lost and it looks overall strange. I believe the reason for this is that my app is using easyloader. At initial page-load my code sets the theme like so:

easyloader.theme = 'material-teal';
easyloader.locale = 'se_SW';

How can I implement a method for changing easyloader.theme and re-render the page to have this theme taking effect?

I simplifyed

Code:

var controles = [
    { type: 'textbox', name: "Name", required: true }
    , { type: 'textbox', name: "Email" }
    , { type: 'textbox', name: "Phone" }
    , { type: 'filebox', name: "File" }
    , { type: 'linkbutton', iconCls: 'icon-ok', text: 'OK', height: 30 }
];

var $cont = $('<form/>', { id: 'ff0' });

$.each(controles, function (i, o) {
    using(o.type, function () {
        $cont.append($('<input/>', { id: 'ff' + i }).appendTo($('<div/>', {}).appendTo($cont))[o.type]($.extend({ width: "100%", label: o.name }, o)));
    });
});

$('body').append($('<div/>', { id: 'win_' }));
using('window', function () {
    $('#win_').window({ title: 'Test js form', width: 300, height: 200, content: $cont });
});	

But button comes in the top. Any suggestions why, or how to make the code correct?

Looking for a way to create a form using only JS, something like attached picture.

Code:

    var $cont = $('<form/>', { id: 'ff0' });
    var $cont1 = $('<input/>', { id: 'ff1' });
    var $cont2 = $('<input/>', { id: 'ff2' });
    var $cont3 = $('<input/>', { id: 'ff3' });
    var $cont4 = $('<input/>', { id: 'ff4' });
    var $cont5 = $('<input/>', { id: 'ff5' });

    using(['combobox', 'textbox', 'filebox', 'passwordbox', 'linkbutton'], function () {
        $cont1.textbox({ label: "Name", name: "Name" }).wrap('<div/>', {});
        $cont2.textbox({ label: "Email", name: "Email" }).wrap('<div/>', {});
        $cont3.textbox({ label: "Phone", name: "Phone" }).wrap('<div/>', {});
        $cont4.filebox({ label: "File", name: "File" }).wrap('<div/>', {});
        $cont5.linkbutton({ iconCls: 'icon-ok', text: 'OK', width: 70}).wrap('<div/>', {});
    });

    $cont.append($cont1);
    $cont.append($cont2);
    $cont.append($cont3);
    $cont.append($cont4);
    $cont.append($cont5);

    $('body').append($('<div/>', { id: 'win_' }));
    using('window', function () {
        $('#win_').window({ title: 'Test js form', width: 300, height: 200, content: $cont });
    });	

This works however not giving the right result, please advice.

Is there a simple way to add a button to the lower left part of the propertygrid table as described in attached picture? If the dialog plugin could be embedded as a page component like layout, it could have been achieved that way I think. But it only opens in  window.

How can I add the button dynamically on top aligning right? Is there any other way recomended?

Perfect, that works very good thanks.

The suggested code gives the following date format: ss/mm/yyyy while I am after yyyy-mm-dd. The code I supplied gives the format attached. No language selection gives me this swedish date format, not 'se_SW' either. Pls advice.

Hi, I'm using easyloader and wants to extend datebox defaults.formatter with the following code

Code:

$.fn.datebox.defaults.formatter = function (date) {
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	var d = date.getDate();
	return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
};
$.fn.datebox.defaults.parser = function (s) {
	if (!s) return new Date();
	var ss = s.split('-');
	var d = parseInt(ss[2], 10);
	var m = parseInt(ss[1], 10);
	var y = parseInt(ss[0], 10);
	if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
		return new Date(y, m - 1, d);
	} else {
		return new Date();
	}
	};

Can I put this into the $.extend(easyloader.modules, {})?
How should that look?
Please advice.

For one case I use a data table where one column is a count of existent rows in another table for that row combination. A normal joint view with a count works but in my case the second table contains millions rows which slows the view or query down. So I would like the original table to load fully and then that count column to be separately loaded with a spinning wheel while loading or similar. Only the count of rows for the ones being displayed in the datagrid needs to be extracted. If the user reloads by pagination or filer or so, that set needs to be post loaded again. Anyone done something similar? Any ideas of how to achieve this?

Works, yes. Thanks!

Hi, I have a datagrid side by side with a Tree. Clicking a row in the grid expands, selects and scollTo that node in the Tree However selected Tree node becomes outside the window as the animation has not finished when scrollTo executes. The node becomes visible in the window for a split second but is moved down and outside the window as the animation continues. When animation is ready, the selected node is outside the window. If I turn animation off, it works fine. How can I make the scrollTo wait for the animation before start scrolling to the node so it becomes visible when done?

Code:

$('#dg').datagrid({
		title: 'dg',
		...
		onSelect: function (index, row) {
			var node = $('#tree').tree('find', row.Code);
			$('#tree').tree('expandTo', node.target).tree('select', node.target);
			$('#tree').tree('scrollTo', node.target);
		}
	});

Yes, thats works fine. Thank you!

This is what I get after a couple of push on refresh or "F5" in my Google Chrome.

When using Easyloader and Google Chrome I get an error. My EasyUI ver is 1.9.3 and below code works for first load, however when refreshing the page I get an error

Code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Pricing Service</title>
	<script src="jquery/jquery-3.4.1.min.js"></script>
	<script src="easyui/easyloader.js"></script>
	<script>
		using('layout', function () { });
	</script>
</head>
	<body class="easyui-layout">
		<div data-options="region:'north',title:'North Title',split:true" style="height: 100px;"></div>
		<div data-options="region:'south',title:'South Title',split:true" style="height: 100px;"></div>
		<div data-options="region:'east',title:'East',split:true" style="width: 100px;"></div>
		<div data-options="region:'west',title:'West',split:true" style="width: 100px;"></div>
		<div data-options="region:'center',title:'center title'" style="padding: 5px; background: #eee;"></div
	</body>
</html>

Please advice.