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

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

原创最新推荐文章于 2023-03-21 14:33:08 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #layout #div #border

Ext JS 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了使用Ext框架进行页面布局时遇到的问题，特别是如何处理包含查询按钮的表单，确保点击查询按钮时能够正常提交表单。文章提供了两种解决方案：调整HTML结构或将Viewport替换为Panel布局。

使用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
});