ExtJs4.0 Panel实例

最新推荐文章于 2016-11-28 16:01:04 发布

原创最新推荐文章于 2016-11-28 16:01:04 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ExtJs Panel

ExtJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用ExtJS创建一个包含登录表单的可交互面板，并详细展示了如何设置面板的各种属性，如标题、大小及位置等。此外，还介绍了如何通过事件监听来响应用户的登录和退出操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// JavaScript Document
Ext.onReady(function(){
	//提示框
	//Ext.Msg.alert("消息提示框","欢迎来到ExtJs");
	//根据元素ID获取元素对象
	Ext.get('Id')
	//根据divId获取html
	Ext.fly('mydivId').dom.innerHTML;
	//根据inputId获取value
	Ext.fly('inputId').dom.value;
	//根据下拉列表ID获取选中的option value
	Ext.fly('selectId').dom.value;
	//根据optionId 获取value
	Ext.fly('sel1').dom.value;
	//创建一个面Panel
	Ext.create('Ext.panel.Panel',{
		//Id属性指panel面板的Id
		id:'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');});
	
	});