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.


posted @   lvye1221  阅读(14)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛