ExtJs学习资料39-Ext.ViewPort实例.docVIP

1、引入ExtJs框架文件（存入Global.js文件中） document.write(link rel=\stylesheet\ type=\text/css\ href=\../extjs/resources/css/ext-all.css\/ ); document.write(script type=\text/javascript\ src=\../extjs/adapter/ext/ext-base.js\/script); document.write(script type=\text/javascript\ src=\../extjs/ext-all.js\/script); document.write(script type=\text/javascript\ src=\../extjs/ext-lang-zh_CN.js\/script); 2、引入Global.js文件 script type=text/javascript src=Global.js/script style type=text/css .icon{ background:url(3.gif) 0 4px no-repeat !important } /style 3、效果图 ===================================================================================================================== 4、JS源代码 script type=text/javascript Ext.onReady(function(){ //--开始-- Ext.QuickTips.init(); var view=new Ext.Viewport({ layout:border, defaults:{ frame:true, bodyStyle:padding:3, margins:0 1 0 1 }, items:[{ region:north, xtype:panel, html:顶部部分 },{ region:south, xtype:panel, html:底部部分 },{ region:west, xtype:form, //header:true, //panel头部显示的标题文字(默认值为 ) //当指定了titile值时，header元素将会自动被创建并显示panel头部显示的标题文字(默认值为 ) //当指定了titile值时，header元素将会自动被创建并显示 ，除非header 属性被指定为false. title:控制面板, iconCls:icon, html:左边部分, collapsible:true, //如果为true,允许用户折叠此区域(默认值为false) //collapseMode:默认情况下,collapseMode是undefined,唯一支持的两个值是undefined和mini. //注意:如果一个可折叠的区域没有标题工具栏,那么collapseMode必须被设置成mini以便让用户可以折叠此区域 //因为在没有标题工具栏的情况下，工具按钮是不会被渲染的 collapseMode:mini, width:180, //区域的宽度 minWidth:180, //此区域允许的最小像素值(默认值为50) //当split为true时,一般情况下需要指定minSize和maxSize参数,以便BoxComponent可以重绘此区域 split:true, minSize:180,//拖动最小宽度 maxSize:220,//拖动最大宽度 useSplitTips:true, //如果为true,当鼠标移过区域的分隔栏时显示一个小提示(默认值为false) splitTip:按住鼠标左键不放拖动,双击隐藏, //当用户鼠标移过一个不可折叠区域的分隔栏上时显示的小提示 collapsibleSplitTip:按住鼠标左键不放拖动,双击隐藏 },{ region:east, xtype:panel, html:右边部分, width:240, minWidth:100, minSize:180,//拖动最小宽度 maxSize:240,//拖动最大宽度 split:true, header:true, colla