Print Page - nesting components (window + datagrid)

Title: nesting components (window + datagrid)
Post by: gurpal2000 on September 10, 2012, 08:17:31 AM

Hi

how does one nest Easy components?

I need a window (or maybe a dialog?) with a autofit grid in it. I don't want to markup the attributes in html, but rather javascript/jquery.

I didn't see an "items" or "components" attribute for say a window.

I tried something like:

Code:

$('#ss').spinner({  
	    required:true,  
	    increment:10
});

$('#divAdmin').window({
			title: 'Dialog',
			width: 400,
			height: 200,
			modal: true
		});

<div id="divAdmin">
<input id="ss" value="2"/>
</div>

but this doesn't show or size automatically. Or do i bind the additional components at window create/show time ?

thanks

Title: Re: nesting components (window + datagrid)
Post by: gurpal2000 on September 12, 2012, 04:35:06 PM

ok i managed to do the nesting. but i can't seem to autofit the grid into the dialog size. Or vice versa. "auto" doesn't seem to work for width/heights?

Code:

<div id="divAdmin">
			<table id="tableRescan"/>
		</div>

$('#tableRescan').datagrid({
			url: 'rescan',
			remoteSort: false,
			width: 400,
			height: 200,
			idField: 'fmtdate',
			columns:[[{
				field: 'fmtdate',
				title: 'date',
				width: 100
			}]]
		});
		
		$('#divAdmin').dialog({
			title: 'dia',
			width: 500,
			height: 300,
			modal: true
		});
	});

Title: Re: nesting components (window + datagrid)
Post by: gurpal2000 on September 12, 2012, 04:44:49 PM

aha worked it out :)

Code:

$('#tableRescan').datagrid('options').onResize = function() {
			$('#divAdmin').dialog('resize');
		};

when the table gets sized, so does the dialog. is this the best practice?

Title: Re: nesting components (window + datagrid)
Post by: stworthy on September 12, 2012, 06:46:47 PM

Please add 'fit' property for datagrid and set its value to true.

Title: Re: nesting components (window + datagrid)
Post by: gurpal2000 on September 13, 2012, 06:02:06 AM

hi yes i ended up doing exactly that (fit: true) and removing this resize code. works great.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: gurpal2000 on September 10, 2012, 08:17:31 AM