When tools '#p-tools' has be used in 'Tab1' panel, it cannot be used in other panel again. Remove tools from 'Tab1' panel and below code will run fine.
$('#main-tab-bar').tabs('add',{ title:"Tab1", content: "test", tools: "#p-tools" });

We are pleased to announce the availability of jQuery EasyUI 1.2.5.

• Compatible with jQuery 1.7.x.
• Some bugs in previous version are fixed.
• Some useful features are added to exists plugins.

Please visit http://www.jeasyui.com/download/v125.php to see more details.

Call 'load' method and pass new parameter to it:
$("#" + datagrid).datagrid('load',{
  type:'...',
  parameters:...
});

For the portal issue, if the horizontal scrollbar is generate by tab panel, set the 'overflow:hidden' style for that tab panel:
<div id="tt" fit="true">
   <div title="Title1"></div>
   <div title="Portal Title" style="overflow:hidden">
      <div id="pp" style="position:relative">
   </div>
</div>

You can try another way: when select the portal tab panel, call 'resize' method to reset the portal size:
$('#tt').tabs({
   onSelect:function(title){
      if (title == 'Portal Title'){
         $('#pp').portal('resize');
      }
   }
});

1) Another way to find and use a tab, users can pass the tab title or tab index. This feature will be supported in version 1.2.5.
2) In version 1.2.5, users can define mini tools on tabs. See the demo http://www.jeasyui.com/easyui/demo/tabs.html.
3) Place a portal to a tab panel, set 'fit' property to true for the portal is a good idea.

Please refer to this tutorial http://www.jeasyui.com/tutorial/datagrid/datagrid2.php.

In your server, you will get 'page' and 'rows' request parameters. You should return exactly 'rows' records to browser not all records.

Paging is the easiest way to manage large rows within the datagrid. Set 'pagination' property to true to allow datagrid paging.

A sample:

$.messager.alert('My Title','Here is a message!');
$('body div.messager-body>div.messager-button').children('a.l-btn').linkbutton({plain:true});

Call $('#p').panel({...}) will recreate the panel.
Call $('#p').panel(methodname, parameter) will perform action on the panel existed.

The portal have 'fit' property and 'resize' method, which can be used to make it work in some container. Try set the 'fit' property to true and call 'resize' method to adjust the portal size when tab panel opened.

The panel load its content via 'href' only when the panel is opened or expanded. Set 'closed' property to true or 'collapsed' property to true to prevent the content from loading at once.

Try specify 'break-word' value with 'word-wrap' property for the datagrid cells:

.datagrid-body .datagrid-cell{
   word-wrap: break-word;
   white-space: normal;
}

When datagrid parent panel resize, try call 'resize' method for your datagrid:

Code:

<div id="pdatagrid" title="TEST" collapsible="true" closable="true" maximizable="true">
  <table width="100%" cellspacing="0" cellpadding="0" border="0" id="test-datagrid" class="easyui-datagrid">
  ...
  </table>
</div>

Code:

$('#pdatagrid').panel('options').onResize = function(){
  $('#test-datagrid').datagrid('resize');
}

Put your accordion component in separate <div> container:

Code:

Carol's Info:<br/>
<% userid = 345 %>
<div style="width:300px;height:200px;">
<!-- #include file="include/userinfo.inc"-->
</div>

Bob's Info:<br/>
<% userid = 678 %>
<div style="width:300px;height:200px;">
<!-- #include file="include/userinfo.inc"-->
</div>

Many methods of treegrid are similar to tree, please use the 'select' method:

$('#tt').treegrid('select', id);