I was also wondering how to do this but the answer is quite easy (of course there could be other ways to do this). I just mixed the 2 methods. I added the Toolbar part via HTML and the rest via JavaScript. For example;
Javascript Part$('#dg').datagrid({
fit: true,
idField: 'date',
columns: [[
{ field: 'date', title: 'Date', width: 80 },
{ field: 'desc', title: 'Description', width: 300 },
{ field: 'amount', title: 'Amount', width: 800, align: 'right'}
]]
});
HTML Part<table id="dg" toolbar="#toolbar" ></table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()">Save</a>
<label>Select Option:</label>
<select id="selection">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
</div>
Adding a seperator is also pretty easy via HTML but you need to add the following style to the anchor tags (as per the example above); style="float: left;"
Thus the a tags would read;
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()" style="float: left;">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="save()" style="float: left;">Save</a>
Now just insert the following code where you want the seperator to appear;
<div class="datagrid-btn-separator"></div>
