ExtJs4.0 Panel实例

来源:互联网 发布:黑马程序员入学测试题 编辑:程序博客网 时间:2024/06/05 23:47
// JavaScript DocumentExt.onReady(function(){//提示框//Ext.Msg.alert("消息提示框","欢迎来到ExtJs");//根据元素ID获取元素对象Ext.get('Id')//根据divId获取htmlExt.fly('mydivId').dom.innerHTML;//根据inputId获取valueExt.fly('inputId').dom.value;//根据下拉列表ID获取选中的option valueExt.fly('selectId').dom.value;//根据optionId 获取valueExt.fly('sel1').dom.value;//创建一个面PanelExt.create('Ext.panel.Panel',{//Id属性指panel面板的Idid:'PanelId',//title属性指定panel面板的标题title : 'Panel Title',//指定panel是否浮动,可选值 true/false        floating : true,  //指定panel是否阴影,可选值 true/false        shadow : false,  //指定true/false或一个ComponentDragger对象        draggable : true,  //指定Panel面板的宽        width : 300,  //指定Panel面板的高        height : 150,  //页面的X Y 值        pageX : 0, pageY : 0,         //指定Panel是否可折叠        collapsible : true,  //指定Panel是否可关闭closable : true ,//指定Panel的关闭形式,hide为隐藏可以通过show方法再次展示,destroy为在内存中进行销毁closeAction : 'hide', //panel 折叠的方式collapseMode : 'header', //指定header的位置 可选项为:'top', 'bottom', 'left' 或 'right'.headerPosition:'top',//指定top项tbar:{xtype:'button',text:'用户登录'},  //指定bottom项bbar:{xtype:'button',text:'关于用户登录'},  //项的集合        items : [{//类型 label名称 对其xtype : 'textfield',fieldLabel:'用户名',labelAlign:'right'                 },{xtype : 'textfield',fieldLabel: '密    码' ,labelAlign:'right'                 },{xtype : 'button',text : '登录',id:'btnLogin', width:80,style:'margin-left:70px'},{xtype : 'button',text : '退出',id:'btnExit', width:80,style:'margin-left:20px'}],           renderTo : Ext.getBody()});//登录按钮click事件Ext.get('btnLogin').on('click',function(){Ext.Msg.alert('System message','You click the login button');});//退出按钮click事件Ext.get('btnExit').on('click',function(){Ext.Msg.alert('System message','You click the exit button');});});

原创粉丝点击