Extjs中面板布局的应用 Extjs Layout

目标：

介绍Panel布局的各种类

Panel布局类在VS中的介绍

内容：

Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局

1，Ext.layout.ContainerLayout 容器布局

提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在

2，Ext.layout.FitLayout 自适应布局

使用layout:'fit' 将使面板子元素自动充满容器，如果有多个子面板也只会第一个会被显示

3，Ext.layout.AccordionLayout 折叠布局（很常有哦！！！）

扩展自适应布局，layout:'accordion' 它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能

4 ，Ext.layout.CardLayout 卡片式布局（也很有用的哦！！）

扩展自适应布局，layout:'card' 它包含了多个子面板，只有一个面板处于显示状态，它用来制作向导或标签页，使用setActiveItem来激火面板

5，Ext.layout.AnchorLayout 锚点布局

根据容器的大小为其所包含的子面板进行定位的布局 layout:'anchor' 分为：百分比，偏移，参考边三种方式的定位

6，Ext.layout.AbsoluteLayout 绝对位置布局

根据面板中配置 x/y 坐标进行定位，layout:'absolute' 坐标值支持使用固定值和百分比两种形式

7，Ext.layout.FormLayout 表单布局

用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:'form'

8, Ext.layout.ColumnLayout 列布局

多列风格的布局格式，每一列的宽度都可以通过百分比和数值确定宽度，layout:'column'

9, Ext.layout.TableLayout 表格布局

可以指定列数，跨行，跨列，可以创建出复杂的表格布局 layout:'table'

10, Ext.layout.BorderLayout 边框布局

该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:'border' 通过region来配置面板

viewport的应用：作为浏览器窗口的整个显示部分，其有着panel的功能，但是一定要注意的是一个页面只有一个viewport

示例分析部分

  1 Extjs面板布局介绍
  2  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext6.aspx.cs" Inherits="EXT1.Ext6"%>
  3  
  4   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5  
  6   <html xmlns="http://www.w3.org/1999/xhtml">
  7  <head runat="server">
  8  <title>第六课,Extjs中面板布局的应用</title>
  9  <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
 10  <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
 11  <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
 12  <script type="text/javascript">
 13  function Read1() {
 14  var MyPanel=new Ext.Panel({
 15  title:'自适应布局',
 16  width:250,
 17  height:200,
 18  x:300,
 19  y:50,
 20  floating:true,
 21  renderTo:id1,
 22  frame:true,
 23  layout:'fit',
 24  items:[
 25  {
 26  title:"面板一",
 27  html:"面板一内容"
 28  },
 29  {
 30  title:'面板二',
 31  html:'面板二内容'
 32  }
 33  ]
 34  });
 35  }
 36  function Read2() {
 37  var Mypanel=new Ext.Panel({
 38  layout:'accordion',
 39  title:'折叠布局',
 40  renderTo:id1,
 41  width:250,
 42  height:300,
 43  x:300,
 44  y:50,
 45  floating:true,
 46  frame:true,
 47  collapsible:true,
 48  titleCollapse:true,
 49  layoutConfig:{
 50  activeOnTop:false,
 51  fill:true,
 52  hideCollapseTool:false,
 53  titleCollapse:true,
 54  animate:true
 55  },
 56  items:[
 57  {
 58  title:"面板一",
 59  html:"面板一内容"
 60  },
 61  {
 62  title:'面板二',
 63  html:'面板二内容'
 64  },
 65  {
 66  title:'面板3',
 67  html:'面板3内容'
 68  },
 69  {
 70  title:'面板4',
 71  html:'面板4内容'
 72  },
 73  {
 74  title:'面板5',
 75  html:'面板5内容'
 76  }
 77  
 78  ]
 79  });
 80  }
 81  function Read3() {
 82  var Mypanel=new Ext.Panel({
 83  layout:'card',
 84  title:'卡片布局',
 85  renderTo:id1,
 86  width:250,
 87  height:300,
 88  x:300,
 89  y:50,
 90  floating:true,
 91  frame:true,
 92  collapsible:true,
 93  titleCollapse:true,
 94  activeItem:0,
 95  
 96  items:[
 97  {
 98  title:"面板一",
 99  html:"面板一内容",
100  id:'p1'
101  },
102  {
103  title:'面板二',
104  html:'面板二内容',
105  id:'p2'
106  },
107  {
108  title:'面板三',
109  html:'面板三内容',
110  id:'p3'
111  }
112  ],
113  buttons:[
114  {
115  text:'上一页',
116  handler:change
117  },
118  {
119  text:'下一页',
120  handler:change
121  }
122  ]
123  });
124  function change(btn) {
125  var index=Number(Mypanel.layout.activeItem.id.substring(1));
126  if (btn.text=='上一页') {
127  index-=1;
128  if (index<1) {
129  index=1;
130  }
131  }
132  else
133  {
134  index+=1;
135  if (index>3) {
136  index=3;
137  } 
138  }
139  Mypanel.layout.setActiveItem('p'+index);
140  }
141  }
142  function Read4() {
143  var Mypanel=new Ext.Panel({
144  title:'锚点布局',
145  renderTo:id1,
146  frame:true,
147  width:300,
148  height:200,
149  x:300,
150  y:50,
151  floating:true,
152  collapsible:true,
153  titleCollapse:true,
154  layout:'anchor',
155  items:[{
156  anchor:'50%,50%',
157  draggable:true,
158  title:'子面板'
159  },
160  {
161  anchor:'-10,-10',
162  title:'子面板2'
163  }]
164  });
165  } 
166  function Read5() {
167  var Mypanel=new Ext.Panel({
168  title:'绝对位置布局',
169  renderTo:id1,
170  frame:true,
171  width:300,
172  height:200,
173  x:300,
174  y:50,
175  floating:true,
176  collapsible:true,
177  titleCollapse:true,
178  layout:'absolute',
179  items:[{
180  x:'10%',
181  y:10,
182  width:100,
183  height:50,
184  title:'子面板'
185  },
186  {
187  x:90,
188  y:70,
189  width:100,
190  height:50,
191  title:'子面板2'
192  }] 
193  });
194  }
195  function Read6() {
196  var MyPanel=new Ext.Panel({
197  layout:'form',
198  title:'表单布局',
199  renderTo:id1,
200  frame:true,
201  width:300,
202  height:200,
203  x:300,
204  y:50,
205  floating:true,
206  collapsible:true,
207  titleCollapse:true,
208  defaultType:'textfield',
209  labelSeparator:':',
210  defaults:{msgTarget:'side'},
211  items:[
212  {
213  fieldLabel:'用户名称',
214  allowBlank:false
215  },
216  {
217  fieldLabel:'用户密码',
218  allowBlank:false
219  }
220  ]
221  });
222  }
223  function Rand7() {
224  Ext.QuickTips.init();
225  var MyPanel=new Ext.Panel({
226  title:'列布局',
227  renderTo:id1,
228  frame:true,
229  width:300,
230  height:200,
231  x:300,
232  y:50,
233  floating:true,
234  layout:'column',
235  items:[
236  {
237  title:'面板1',
238  width:100,
239  height:100
240  },
241  {
242  title:'面板2',
243  width:100,
244  height:100
245  }
246  ]
247  });
248  }
249  function Read8() {
250  var Mypanel=new Ext.Panel({
251  title:'表格布局',
252  renderTo:id1,
253  frame:true,
254  width:400,
255  height:300,
256  x:350,
257  y:50,
258  floating:true,
259  collapsible:true,
260  titleCollapse:true,
261  draggable:{ 
262  insertProxy: false,//拖动时不虚线显示原始位置 
263  onDrag : function(e){ 
264  var pel =this.proxy.getEl(); 
265  this.x = pel.getLeft(true); 
266  this.y = pel.getTop(true);//获取拖动时panel的坐标 
267  var s =this.panel.getEl().shadow; 
268  if (s){ 
269  s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); 
270  } 
271  }, 
272  endDrag : function(e){ 
273  this.panel.setPosition(this.x, this.y);//移动到最终位置 
274  } 
275  },
276  layout:'table',
277  layoutConfig:{
278  columns:3
279  },
280  items:[
281  {
282  title:'面板1',
283  html:'面板一内容',
284  rowspan:2,
285  height:80
286  },
287  {
288  title:'面板2',
289  html:'面板2内容',
290  colspan:2
291  
292  },
293  {
294  title:'面板3'
295  },
296  {
297  title:'面板4'
298  }
299  
300  ]
301  });
302  }
303  function Read9() {
304  var Mypanel=new Ext.Viewport({
305  layout:"border", 
306  items:[
307  { 
308  region:"north", 
309  height:50, 
310  title:"顶部面板" 
311  }, 
312  {
313  region:"south", 
314  height:50, 
315  title:"底部面板"
316  }, 
317  {
318  region:"center", 
319  title:"中央面板"
320  }, 
321  {
322  region:"west", 
323  width:100, 
324  title:"左边面板"
325  }, 
326  {
327  region:"east", 
328  width:100, 
329  title:"右边面板"
330  } 
331  ] 
332  });
333  }
334  function Read10() {
335  var b =new Ext.Button({ 
336  id:"show-btn", //定义按钮的ID 
337  text:"弹出按钮", //定义按钮的标题 
338  renderTo:document.body//将弹出按钮渲染到窗体上 
339  }); 
340  var button = Ext.get('show-btn'); 
341  var win; 
342  button.on('click', function() { 
343  //创建TabPanel 
344  var tabs =new Ext.TabPanel({ 
345  region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 
346  margins: '3 3 3 0', 
347  activeTab: 0, //当前选项卡是第1个(从0开始) 
348  defaults: { 
349  autoScroll: true 
350  }, 
351  items: 
352  [
353  { 
354  title: 'Bogus Tab', 
355  html: "第一个Tab的内容." 
356  }, 
357  { 
358  title: 'Another Tab', 
359  html: "我是另一个Tab" 
360  }, 
361  { 
362  title: 'Closable Tab', 
363  html: "这是一个可以关闭的Tab", 
364  closable: true//显示关闭按钮 
365  }
366  ] 
367  
368  }); 
369  
370  //定义一个Panel 
371  var nav =new Ext.Panel({ 
372  title: 'Navigation', 
373  region: 'west', //放在西边，即左侧 
374  split: true, //设置为分割 
375  width: 200, 
376  
377  collapsible: true, //允许伸缩 
378  margins: '3 0 3 3', 
379  cmargins: '3 3 3 3' 
380  }); 
381  
382  //如果窗口第一次被打开时才创建 
383  if (!win) { 
384  win =new Ext.Window({ 
385  title: 'Layout Window', 
386  closable: true, //显示关闭按钮 
387  width: 600, 
388  
389  height: 350, 
390  
391  border : false, 
392  plain: true, 
393  layout: 'border', 
394  closeAction:'hide', 
395  items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局 
396  }); 
397  
398  } 
399  
400  win.show(button); 
401  
402  }); 
403  };
404  Ext.onReady(Read10);
405  </script>
406  </head>
407  <body>
408  <form id="form1" runat="server">
409  <div id="id1">
410  
411  </div>
412  </form>
413  </body>
414  </html>

posted on 2012-10-25 11:18 海山阅读(2562) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

码家

公告