Was able to resolve this issue by setting the overflow:hidden style on the dialog window and on the individual tabs. 

I'd like to bump this, please.  I can send images of the behavior if necessary.

Greetings and thanks.

Attempting to find the correct height for the window, I set  the tab height to 420 which was too small.  Setting the the tab height to 422 made the window jump in height - now way to tall.  Not sure what is causing this but I am still unable to put the window height where I need it.

Greetings:

Still playing with what seems to be a pretty nice product.  Came across a couple of things trying to create a dialog form.  Here is the form markup:

Code:

<div id='pradata-update'><div>
	<form id='pradata-form' method='post' novalidate>		
    	<div id='pradata-frm-tabs'>
       		<div title='Practice General'>
				<fieldset><legend>Practice Demographics</legend>
					<div class='fitem'><label>Practice Name:</label><input name='practicename'/></div>
					<div class='fitem'><label>Address 1:</label><input name='address1'/></div>
					<div class='fitem'><label>Address 2:</label><input name='address2'/></div>
					<div style='display:table'>
						<div class='fitem' style='display:table-cell;padding-right:5px'><label>City/ST/Zip:</label><input name='city'/></div>
						<div class='fitem' style='display:table-cell;padding-right:5px'><input name='state'/></div>
						<div class='fitem' style='display:table-cell;'><input name='zipcode'/></div>
					</div>
					<div style='display:table'>
						<div class='fitem' style='display:table-cell;padding-right:5px'><label>Telephone:</label><input name='telephone'/></div>
						<div class='fitem' style='display:table-cell'><label style='width:20px;'>Fax:</label><input name='faxnumber'/></div>
					</div>					
					<div class='fitem'><label>Web Address:</label><input name='webaddress'/></div>
				</fieldset>
				<fieldset><legend>Practice Identifiers</legend>
					<div style="display:table">
						<label style='padding-left:3px;text-align:left;display:table-cell;width:152px'>Federal Tax ID:</label>
						<label style='text-align:left;display:table-cell;width:152px'>Practice NPI:</label>
						<label style='text-align:left;display:table-cell;width:153px'>Practice PIN:</label>
					</div>
					<div style="display:table">	
						<div class='fitem' style='display:table-cell;width:152px'><input name='taxid'/></div>
						<div class='fitem' style='display:table-cell;width:152px'><input name='npi'/></div>
						<div class='fitem' style='display:table-cell;width:153px'><input name='practicepin'/></div>
					</div>						
				</fieldset>				
			</div>
			<div title='Users'>
			<div>
		</div>
	</form>
</div>

This following code initializes the form / elements:

Code:

	$('#pradata-update').dialog({title: 'Practice Record Editor',width:520,height:470,closed:true,shadow:false,modal:true});		
	$('#pradata-form').append($('#pradata-frm-tabs').tabs({border:false,plain:true}));
	
	/** Define the Form Fields **/
	$('input[name=practicename]').textbox({width: 350,height: 24});
	$('input[name=address1]').textbox({width: 350,height: 24});
	$('input[name=address2]').textbox({width: 350,height: 24});
	$('input[name=city]').textbox({width: 200,height: 24});
	$('input[name=state]').textbox({width: 60,height: 24});
	$('input[name=zipcode]').textbox({width: 80,height: 24});
	$('input[name=telephone]').textbox({width: 157,height:24});
	$('input[name=faxnumber]').textbox({width: 157,height: 24});
	$('input[name=webaddress]').textbox({width: 350,height: 24});
	$('input[name=taxid]').textbox({width: 148,height:24});
	$('input[name=npi]').textbox({width: 148,height: 24});
	$('input[name=practicepin]').textbox({width: 154,height: 24});
	$('#pradata-form').form({});

The dialog element at a height of 470 is too tall and 467 is too small (the window height is not relevent the the number I put in the height.  Much easier to show you visually.
If I remove the height property, the window shows perfect - EXCEPT - for when I select the second tab where the window shrinks because there is nothing on the tab. 

I need the window height to be consistent - no matter what tab I select on the form.  Any help would be appreciated.  Let me know if you need images and where I can send them.

Thank you kindly.

Greetings:

How do I retrieve the current sort order for a datagrid?  If I wish to insert a record into the grid then I will need to know WHERE to insert it based on the sort order.  Thank you.

Using jQuery and EasyUI, I would like to know how to dynamically create a layout.  The following is my attempt; however is doesn't appear to work:

Code:

    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>CTest Site</title>
    		<link rel="stylesheet" type="text/css" href="app/lib/jquery-easyui/themes/default/easyui.css">
    		<link rel="stylesheet" type="text/css" href="app/lib/jquery-easyui/themes/icon.css">				
    		<script data-main="app/app" src="app/lib/require-js/require.js"></script>
    	</head>	
    	<body></body>
    </html>

My app.js

Code:

    requirejs.config({
        "baseUrl": "app/lib",
        "paths": {
          "app": "/app",
          "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min",
          "easyui": "jquery-easyui/jquery.easyui.min"
        }
    });
    define(["jquery"], function($){	
    	require(["easyui"],function(){
    		require(["app/views/viewport"],function(){
    		});
    	});
    });

My viewport.js

Code:

    //Layout the page
    $('body').addClass("easyui-layout");
    $('body').append("<div id='spa-head' data-options=\"region:'north'\"></div>");
    $('body').append("<div id='spa-west' data-options=\"region:'west',width:300,split:true\"></div>");
    $('body').append("<div id='spa-cntr' data-options=\"region:'center',title:'CENTER'\"></div>");

The page should have rendered a layout with regions for north, west and center. The center panel would have been titled and the west panel would have had a resizable splitter. Instead, the page was blank even though I could see the proper elements rendered in the console.