牛骨文教育服务平台(让学习变的简单)
博文笔记

ExtJS学习笔记(一)运用region属性布局遇到的问题

创建时间:2017-06-16 投稿人: 浏览次数:783
博主it小白,还在新手村挣扎,如有什么错误请不吝赐教。最近公司要求使用extjs进行java-web开发,参照公司的框架边学边写,遇到过不少坑,在这里记录一下学习的过程。
标题分栏:要实现这种效果,只要在同级的item中设置title属性就可以了。

这里写图片描述

页面布局:主要使用一个控件panel,感觉就相当于HTML中的div。位置通过region来设置。
items: [{
                  region: "west",//自动排位置
                  layout: "border",
                  width :750,
                  style:"border:#B8BBC2 solid 1px;background:#f9f9f9;margin-top:6px;",//可以在这里写css代码
                  xtype:"panel",
                  items: [{
                      region: "north",
                      height:80,
                  },{
                      region: "center",
                      height:300,
                      style:"border:#B8BBC2 solid 1px;background:#f9f9f9;margin-top:6px;",
                  }]
              },{
                  id:"centerBox",
                  region: "center",
                  layout: "fit",//自动充满浏览器
                  style:"border:#B8BBC2 solid 1px;background:#f9f9f9;margin-top:6px;",
                  xtype:"panel",
                  items:[{
//                    region: "north",
                      isSearch : true,
                      hidden:false,
                      items:[{
                          id:"echarBox1",
                      },{
                          id:"infoBox1",
                          hidden:true,
                          layout: "fit",
                      },{
                          id:"infoBox2",
                          hidden:true,
                          layout: "fit",  
                      }]
                  }]
              }]

效果

有一点需要注意的是,使用region来布局,位置一定要设成north→center→south或者west→center→east。如果只有两块就west→center而不能westr→east。
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。