Ext在同一页面创建多个表格时，不能指定ID属性
因工作需要，需要自定义创建多个表并列在一起。刚开始想得挺简单，用Ext中DOM操作方法，创建div层，并且给div层命名ID，再创建多个表格 rendTo 对应ID的div层上，就OK了。可按照这种想法，操作时遇到问题了，如果给创建的grid指定ID，尽管指定的ID不重复，但会让表格的布局位置发生改变，不能达到理想的效果。
如示例代码如下：
<html>
<head>
<title>test-grid-page</title>
<link rel="stylesheet" type="text/css" href="../ext-4.0.7-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="../ext-4.0.7-gpl/bootstrap.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.grid.Panel', {
columns: [
{ header: 'Secname', dataIndex: 'secname' },
{ header: 'Value', dataIndex: 'value'},
{ header: 'CreateDate', dataIndex: 'createDate', flex: 1 }
],
height: 300,
width: 600,
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '第{0} - {1}条 共{2}条',
emptyMsg: "没有符合条件的记录"
}),
renderTo: 'gridChild_TEMPLATE28',
id: 'gridChild_TEMPLATE28'
});
Ext.create('Ext.grid.Panel', {
columns: [
{ header: 'Secname', dataIndex: 'secname' },
{ header: 'Value', dataIndex: 'value'},
{ header: 'CreateDate', dataIndex: 'createDate', flex: 1 }
],
height: 300,
width: 600,
bbar: Ext.create('Ext.PagingToolbar', {
displayInfo: true,
displayMsg: '第{0} - {1}条 共{2}条',
emptyMsg: "没有符合条件的记录"
}),
renderTo: 'gridChild_TEMPLATE57',
// id: 'gridChild_TEMPLATE57'
});
});
</script>
</head>
<body>
<div style="width: 300px; height: 500px; float:left; border: 1px solid black;">
<div id="treeCmp"></div>
</div>
<div style="border:1px solid red; float:left">
<div id="gridChild_TEMPLATE28" style="text-align:centor"></div>
<div id="gridChild_TEMPLATE57" style="text-align:centor"></div>
</div>
<hr />
</body>
</html>
用chrome访问的效果如：
第一张图中的分页按钮跑到左上角去了。用网页元素分析查看，如下图：
主要是指定ID的话，这样 pagingtoolbar 等和指定ID的重载一起，少了自动创建的一层，从而导致样式发生改变的。可以将上述示例代码中的ID属性注释，可得到正确位置的表格：
查看ExtJS官方文档，对于表格中的ID属性是这样解释的，看一遍没看懂，先放在这了。
It should not be necessary to use this configuration except for singleton objects in your application. Components created with an id may be accessed globally using Ext.getCmp.
Instead of using assigned ids, use the itemId config, and ComponentQuery which provides selector-based searching for Sencha Components analogous to DOM querying. The Container class contains shortcut methods to query its descendant Components by selector.
Note that this id will also be used as the element id for the containing HTML element that is rendered to the page for this component. This allows you to write id-based CSS rules to style the specific instance of this component uniquely, and also to select sub-elements using this component's id as the parent.
Note: to avoid complications imposed by a unique id also see itemId.
Note: to access the container of a Component see ownerCt.