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

博主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。
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值