extjs面板使用

目标：

      介绍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

       

    示例分析部分

Extjs面板布局介绍

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

转载于:https://www.cnblogs.com/zonglonglong/archive/2012/09/03/2668436.html