ExtJs入门 （02）-布局面板
生活随笔
收集整理的這篇文章主要介紹了
ExtJs入门 （02）-布局面板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>easy</title><!--引入extjs樣式文件--><link rel="stylesheet" type="text/css"href="Easy/theme-gray/resources/theme-gray-all.css"><!--引入extjs核心庫--><script src="Easy/ext-all.js"></script></head> <body><script>Ext.onReady(function () {var accordion = Ext.create("Ext.panel.Panel", {title: "west",layout: "accordion", //設置為手風琴布局layoutConfig: {animate: true},width: 250,minWidth: 90,region: "west", //設置方位split: true,collapsible: true,items: [{ title: "嵌套面板一", html: "嵌套面板一", iconCls: "save" },{ title: "嵌套面板二", html: "嵌套面板二", iconCls: "search" },{ title: "嵌套面板三", html: "嵌套面板三", iconCls: "back" },{ title: "嵌套面板四", html: "嵌套面板四", iconCls: "12" }]});new Ext.Viewport({title: "Viewport",layout: "border", //這里是（border）邊界布局defaults: {bodyStyle: "background-color: #FFFFFF;",frame: true},items: [accordion, //這里是（accordion）手風琴布局{region: "east", width: 90, title: 'north', collapsible: true },{ region: "north", height: 100, title: 'north', collapsible: true },{ region: "center", split: true, border: true, collapsible: true, title: 'center' },{ region: "south", title: "south", split: true, border: true, collapsible: true, height: 100 }]});});</script> </body>
</html>
展示效果:
總結
以上是生活随笔為你收集整理的ExtJs入门 （02）-布局面板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取keycode
- 下一篇： Extjs 入门(03) 折叠｜｜收锉