2007年11月10日
Openforce アプリケーション開発

Ext.Viewportでレイアウトがもっと簡単に

symfonyのプラグインもちょくちょく出始めて、本格的に使われるようになってきたExt。
2.0になっていろいろ変更されたけど、全コンポーネント、コンティナにユニークIDでアクセスできるようになったりと、
かなり使い勝手が良くなってます。レイアウトもJson形式でより手軽にレイアウトが可能になりました。

とりあえず以下のhtmlをベースに、どんどん着飾っていきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<?php include_http_metas() ?>
<?php include_metas() ?>
 
<?php include_title() ?>
 
<link rel="shortcut icon" href="/favicon.ico" />
 
</head>
<body>
 
	<div id="north"></div>
	<div id="south"></div>
	<div id="west"></div>
	<div id="east"></div>
	<div id="center"><?php echo $sf_data->getRaw('sf_content') ?></div>
 
</body>
</html>
 
 

単に各パーツを区切ってポジショニングしただけの、何もないレイアウト。

Ext.onReady(function(){
 
  var viewport = new Ext.Viewport({
    layout: 'border',//レイアウトの形式を指定
    items:[
   //上部
    {
      region:'north',
      contentEl: 'north',
      height:35
    },
    //下部
    {
      region:'south',
      contentEl: 'south',
      height:100
    },
    //右部
    {
      region:'east',
      contentEl: 'east',
      width:200
    },
    //左部
    {
      region:'west',
      contentEl: 'west',
      width:150
    },
    //中央
    {
      region:'center',
      contentEl: 'center'
    }
 
 
    ]
  });
 
 
 
});

右、左、下にtitle属性を追加

Ext.onReady(function(){
 
  var viewport = new Ext.Viewport({
    layout: 'border',//レイアウトの形式を指定
    items:[
   //上部
    {
      region:'north',
      contentEl: 'north',
      height:35
    },
    //下部
    {
      region:'south',
      contentEl: 'south',
      height:100,
      title: "Footer"
    },
    //右部
    {
      region:'east',
      contentEl: 'east',
      width:200,
      title: "Right"
    },
    //左部
    {
      region:'west',
      contentEl: 'west',
      width:150,
      title: "Left"
    },
    //中央
    {
      region:'center',
      contentEl: 'center'
    }
    ]
  });
 
 
 
});

さらにsplit属性でサイズ変更可能にしてみる。

Ext.onReady(function(){
 
  var viewport = new Ext.Viewport({
    layout: 'border',//レイアウトの形式を指定
    items:[
   //上部
    {
      region:'north',
      contentEl: 'north',
      height:35
    },
    //下部
    {
      region:'south',
      contentEl: 'south',
      height:100,
      title: "Footer",
      split: true
    },
    //右部
    {
      region:'east',
      contentEl: 'east',
      width:200,
      title: "Right",
      split: true
    },
    //左部
    {
      region:'west',
      contentEl: 'west',
      width:150,
      title: "Left",
      split: true
    },
    //中央
    {
      region:'center',
      contentEl: 'center'
    }
    ]
  });
 
 
 
});

minSize、maxSizeで変更サイズに制限を持たせる

Ext.onReady(function(){
 
  var viewport = new Ext.Viewport({
    layout: 'border',//レイアウトの形式を指定
    items:[
   //上部
    {
      region:'north',
      contentEl: 'north',
      height:35
    },
    //下部
    {
      region:'south',
      contentEl: 'south',
      height:100,
      title: "Footer",
      split: true,
      minSize:80,
      maxSize:200
    },
    //右部
    {
      region:'east',
      contentEl: 'east',
      width:200,
      title: "Right",
      split: true,
      minSize:80,
      maxSize:200
    },
    //左部
    {
      region:'west',
      contentEl: 'west',
      width:150,
      title: "Left",
      split: true,
      minSize:80,
      maxSize:200
    },
    //中央
    {
      region:'center',
      contentEl: 'center'
    }
    ]
  });
 
 
 
});

collapsible属性でクリックで収納できるようにする

Ext.onReady(function(){
 
  var viewport = new Ext.Viewport({
    layout: 'border',//レイアウトの形式を指定
    items:[
   //上部
    {
      region:'north',
      contentEl: 'north',
      height:35
    },
    //下部
    {
      region:'south',
      contentEl: 'south',
      height:100,
      title: "Footer",
      split: true,
      minSize:80,
      maxSize:200,
      collapsible:true
    },
    //右部
    {
      region:'east',
      contentEl: 'east',
      width:200,
      title: "Right",
      split: true,
      minSize:80,
      maxSize:200,
      collapsible:true
    },
    //左部
    {
      region:'west',
      contentEl: 'west',
      width:150,
      title: "Left",
      split: true,
      minSize:80,
      maxSize:200,
      collapsible:true
    },
    //中央
    {
      region:'center',
      contentEl: 'center'
    }
    ]
  });
 
 
 
});