资源描述：
《extjs学习笔记》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、ExtJs学习笔记最简单的例子应用extjs需要在页面中引入extjs的样式及extjs库文件。所以在使用Extjs框架的页面一般需要包括下边几句:最简单的例子接下
2、来写一个最简单的例子，在html中除了上边引用的三个文件还要引用自己写的hello.js.最简单的例子Hello.js代码：Ext.onReady(function()｛Ext.MessageBox.alert("hello","hello,esayjfopensource");｝)最简单的例子结果：最简单例子上边显示了结果，进一步我们可以在页面显示一个窗口代码如下:Ext.onReady(function()｛varwin=newExt.Window({title:
3、"hello",width:300,height:200,html:"
Hello,easyjfopensource
"});win.show();｝)最简单的例子结果：Ext.PanelPanel示例:varpanel1;functionnewPanel1(){varconfig1={title:'这是标题栏', width:300, height:300,floating:true,renderTo:Ext.getBody(),draggable:{insertProxy:false,onDrag:function(e){varpel=t
4、his.proxy.getEl();this.x=pel.getLeft(true);this.y=pel.getTop(true);Ext.Panel},endDrag:function(e){this.panel.setPosition(this.x,this.y); } },tools:[{id:close,handler:function(event,toolEl,panel){panel.hide();}}],layout:'border',Ext.Panelitems:[{ title:'左边栏', regio
5、n:'west', height:100, width:200,minSize:75,maxSize:250, margins:'5055' },{ title:'中间主体部分',region:'center', margins:'5550',minSize:100, }],Ext.Paneltbar:['请输入关键字:',{xtype:'textfield',width:80},'-',{text:'点一下',handler:function(){alert("你刚才点了此按钮
6、！");}}],collapsible:true,shadow:false};Ext.Panelpanel1=newExt.Panel(config1); panel1.setPosition(0,0);varresizer=new//Ext.Resizable(panel1.getEl(),{handlers:'all'});//resizer.on('resize',function(){panel1.updateBox(panel1.getSize());}); }Ext.onReady(newPanel1);显示结果如下：结果显示：布局absolute绝对定位布
7、局,通过定位子元素在容器内部的坐标决定子元素的位置accordion手风琴布局,收缩式的类似菜单样式,包含多个面板,只显示其中一个anchor定位式布局,相对于容器四周的尺寸大小,对其包含在内的元素进行定位autoDefaultbordercard卡片式布局，标签和向导两种Column列布局fitformHbox纵向切分布局Menu菜单布局，仅用于菜单组件(Ext.menu.Menu)tabletoolbar工具栏布局，仅用于工具栏组件(Ext.Toolbar)Vbox横向切分布局Ext.PanelExt.Panel有五个部分
