Ext在同一页面创建多个表格时,不能指定ID属性
来源:互联网 发布:员工管理系统java和sql 编辑:程序博客网 时间:2024/05/20 16:00
因工作需要,需要自定义创建多个表并列在一起。刚开始想得挺简单,用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.
- Ext在同一页面创建多个表格时,不能指定ID属性
- 如何 在同一页面中使用多个eXtremeTable
- 同一header和footer使用在多个页面中
- 多个bootstrap模态框在同一页面无法正常显示
- IDEA 在同一目录创建多个项目
- IDEA 在同一目录创建多个项目
- 判断表格中同一属性多个输入框内容是否重复
- websocket:如何建立在同一台client和同一台server创建多个连接
- ext proerptyGrid-属性表格
- 同一页面放置多个UpdatePanel
- 同一页面放置多个UpdatePanel
- js实现,同一页面多个倒计时
- js实现,同一页面多个倒计时
- XCode同一Project创建多个target
- XCode 同一Project创建多个target
- XCode 同一Project创建多个target
- XCode 同一Project创建多个target
- XCode 同一Project创建多个target
- DP file *2
- android34_android自定义权限
- http://poj.org/problem?id=3624
- jquery easyui datagrid 列自适应窗口宽度
- Solaris 10u10编译MMSLite客户端问题 -- cc: -W 选项带有未知程序 all
- Ext在同一页面创建多个表格时,不能指定ID属性
- IOS~bundle文件(一)
- 表单验证的完整应用
- 5-1 设计三角形周长和面积的类(含错误)
- 输入工资涨工资排序输出
- sql server2008 批量删除发生:查询处理器用尽了内部资源,无法生成查询计划。这种情况很少出现,只有在查询极其复杂或引用了大量表或分区时才会出现。请简化查询
- C语言解释器-19 语法分析(4)
- GLSL基础
- ZTREE的使用