ExtJS 学习笔记示例2-在组件中添加子组件，并操作子组件

最新推荐文章于 2021-06-03 04:05:20 发布

xuejingmi

最新推荐文章于 2021-06-03 04:05:20 发布

阅读量959

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xuejm0218/article/details/53229248

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

此文章要感谢尚学堂的白鹤翔老师，是根据白老师的视频整理的。

1、代码结构

2、代码示例window_002.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<title>示例2-在组件中添加子组件，并操作子组件</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- ext的样式文件 -->
	<link rel="styleSheet" type="text/css" href="static/plugins/extjs/resources/css/ext-all.css" />
	<!-- extjs的核心文件 -->
	<script type="text/javascript" charset="utf-8" src="static/plugins/extjs/ext-all-debug.js"></script>
	<!-- 国际化文件 -->
	<script type="text/javascript" charset="utf-8" src="static/plugins/extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" charset="utf-8" src="static/js/window_002.js"></script>
</head>
<body>
      
</body>
</html>

3、代码示例window_002.js

Ext.onReady(function(){

	//ExtWeb 300例 ex002 在组件中添加子组件，并进行一系列针对组件的操作
	var win = new Ext.Window({
		id:'myWin',
	    title: '我的窗口',
        height: '36%',
        width: '30%',
        draggable:false,     //不允许拖拽
        resizable:false,     //不允许改变窗口大小
        //closable:false,    //不显示关闭按钮
        minimizable:true,    //显示最小化按钮
        maximizable:true,    //显示最大化按钮
        //collapsible:true,  //显示折叠效果
        bodyStyle: {
		    background: '#ffc',
		    padding: '10px'
		},
        enderTo:Ext.getBody(),
        items:[{
        	xtype:'panel',
        	height: 150,
        	width: '100%',
        	html:'我是一个面板'
        },{
        	xtype:'button',
        	text:'按钮',
        	handler:function(btn){
        		Ext.MessageBox.alert("提示",btn.text)
        	}
        }],
        fbar:[{     				//表示在当前组件的top位置增加一个工具条,bbar(下)lbar(左)rbar(右)fbar(底)
        	text:'按钮1',
        	handler:function(btn){
        		//Ext.MessageBox.alert("提示",btn.up('window').title);  //每个组件都有up(),down(),需要的参数是组建的xtype或选择器
        		Ext.MessageBox.alert("提示",btn.up('#myWin').title); 
        	}
        },{
        	text:'按钮2',
        	handler:function(){
        		Ext.MessageBox.alert("提示",Ext.getCmp('myWin').title);
        	}
        },{
        	text:'按钮3',
        	handler:function(btn){
        		console.info(btn.ownerCt);		//btn.ownerCt是Object{fbar};
        		Ext.MessageBox.alert("提示",btn.ownerCt.ownerCt.title);  
        	}
        }]
	});
	win.show();
});

4、效果图

xuejingmi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS 学习笔记示例2-在组件中添加子组件，并操作子组件

此文章要感谢尚学堂的白鹤翔老师，是根据白老师的视频整理的。1、代码结构2、代码示例window_002.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>示例2-在组件中添加子组件，并操作子组件
复制链接

扫一扫