首页
后端开发
C#
ExtJS CardLayout面板布局介绍

ExtJS CardLayout面板布局介绍

0 次浏览 0 条评论
ppt
ppt

卡片式面板切换的老牌方案，ExtJS 的 CardLayout用起来还是蛮顺手的。它的核心思路挺简单：一个容器里只显示一个子面板，其它的都先藏着。像安装向导、分步骤操作界面，这种需求它就合适。

用法也不复杂，一个 Panel 加上 layout: 'card'，配合 activeItem 来控制当前显示的项就行了。你还可以加上 layoutConfig: { animate: true }，切换的时候会有个动画，用户体验还挺不错的。

比如下面这个例子：两个高度为 250 的子面板，一个放了 diseaseWQZInfo，一个放了 diseaseYQZInfo，点一下按钮就能切换。

var card = new Ext.Panel({
  layout: 'card',
  activeItem: 0,
  layoutOnTabChange: true,
  width: 640,
  layoutConfig: {
    animate: true
  },
  items: [
    { height: 250, layout: 'fit', items: [diseaseWQZInfo] },
    { height: 250, layout: 'fit', items: [diseaseYQZInfo] }
  ]
});

如果你之前用惯了 jQuery Tabs 或者 ViewPager 这类选项卡组件，CardLayout 切换起来少了点手动 DOM 的烦恼，逻辑清晰，维护起来也轻松。嗯，要注意的是，它比较适合组件化的项目，纯静态页面就别凑热闹了。

ppt 文件大小：1.87MB