使用Ext Viewport进行页面布局时Panel中的sumit按钮无法提交表单数据

最新推荐文章于 2023-03-21 14:33:08 发布

selley

最新推荐文章于 2023-03-21 14:33:08 发布

阅读量2.3k

点赞数

分类专栏： Ext JS 文章标签： ext layout div border

本文链接：https://blog.csdn.net/selley/article/details/3298578

版权

Ext JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用Ext进行页面布局的做法是使用viewport（可以看到如下的代码）：

 
 var viewport = new Ext.Viewport({
       layout:'column',
    //autoScroll:true, 
       items:[topp,botp]
});
 

topp，botp分别对应由下面代码中的top,bot div构建的Ext.Panel对象：

 
 <body>
<form id="form">
   <div id="top">
       日期<input type="text"/><input type="submit" value="查询"/> 
   </div>
   <div id="bot" style="overflow-x:auto;overflow- y:auto;width:100%;height:100%;">
    sssssssssssssssssssssss
   </div>
  </form>
</body>
 

这个代码是form想包含一个或两个div布局元素，使用viewport来布局页面时，这种form是被忽略掉的，所以点击查询按钮表单不提交。

解决的办法一种是form移到div元素中，如下：

 
 <body>
<div id="top">
 <form id="form">
       日期<input type="text"/><input type="submit" value="查询"/> 
     </form>
   </div>
<div id="bot" style="overflow-x:auto;overflow-y:auto;width:100%;height:100%;">
    sssssssssssssssssssssss
</div>
</body>
 

这样一个页面可能会有多个form

另一种办法则是form还是在div外，但是不使用viewport进行布局了，将
var viewport = new Ext.Viewport({
       layout:'column',
      //autoScroll:true,
       items:[topp,botp]
});
改为如下代码，使用Panel布局：

 
 var onePanel = new Ext.Panel({
     layout:'column',
     border:false,
     items:[topp,botp],
     renderTo:'form',
     width:Ext.getBody().getWidth()-5,
     shadow:true
});
 