ExtJs——Ext.window.Window

微信小程序实战项目——点餐系统       程序员11月书讯，评论得书啦       Get IT技能知识库，50个领域一键直达

4、ExtJs——Ext.window.Window

modal:true,

弹出后原页面变灰不可编辑

window事件：
listeners : { "minimize":function(){ Ext.Msg.alert("提示","最小化"); }, "beforehide" : function() { Ext.Msg.alert("提示", "要隐藏吗?"); // return true; }, "show":function(){ // Ext.Msg.alert("提示","你好！我来也。"); }, "hide" : function() { Ext.Msg.alert("提示", "再见！"); } "close":function(){ Ext.Msg.alert("提示","窗口关闭！"); mainWindow.destroy(); } },

第一个组件：Ext.window.Window。对于组件，也就是Ext最吸引开发者的地方。
- xtype：组件的别名 
- Hierarchy 层次结构 
- Inherited mixins 混入的类 
- Requires 该组件需要使用的类
- configs：组件的配置信息 
- properties：组件的属性
- methods：组件的方法

- events：组件的事件

Ext.onReady(function(){

    //Ext.create方法相当于创建一个实例对象
    Ext.create('Ext.window.Window',{
        title:'我的第一个组件',
        width:400,   //Number型，也可以是字符串类型 width:'90%'
        height:300,
        layout:'fit',
        renderTo:Ext.getBody()   //新创建的组件 渲染到什么位置
    }).show();                   //需要此方法，因为默认是隐藏的

});

Ext.onReady(function(){
	
	//Ext.create方法相当于创建一个实例对象
	Ext.create('Ext.window.Window',{
		title:'我的第一个组件',
		width:400,   //Number型，也可以是字符串类型 width:'90%'
		height:300,
		layout:'fit',
		renderTo:Ext.getBody()   //新创建的组件 渲染到什么位置
	}).show();                   //需要此方法，因为默认是隐藏的
	
});

window组件常用属性和方法讲解:
 configs：
- constrain:布尔值，true为限制窗口只能在其容器内移动，默认值为false，允许窗口在任何位置移动。(另：constrianHeader属性)
- modal:布尔值，true为设置模态窗口。默认为false
- plain：布尔值，true为窗口设置透明背景。false则为正常背景，默认为false
- x、y 设置窗口左上角坐标位置。
- onEsc：复写onEsc函数，默认情况下按Esc键会关闭窗口。
- closeAction：string值，默认值为'destroy'，可以设置'hide'关闭时隐藏窗口
- autoScroll：布尔值，是否需要滚动条，默认false

Ext.onReady(function(){

    //Ext.create方法相当于创建一个实例对象
    Ext.create('Ext.window.Window',{
        title:'我的第一个组件',
        width:400,   //Number型，也可以是字符串类型 width:'90%'
        height:300,
        layout:'fit',
        constrain:true,          //限制窗口不超出浏览器边界
        constrainHeader:true,    // 不允许该窗体标题超出浏览器边界
        modal:true,              //设置一个模态窗口
        plain:true,
        icon:'js/ExtJs/icons/used/browser_window.png',               //图片路径
        iconCls:'',             //css样式
        x:50,
        y:50,
        html:'我是一个div

我是第二个div

',  

        autoScroll:true,  

        renderTo:Ext.getBody()   //新创建的组件 渲染到什么位置  

          

    }).show();                   //需要此方法，因为默认是隐藏的  

      

});  

Ext.onReady(function(){
	
	//Ext.create方法相当于创建一个实例对象
	Ext.create('Ext.window.Window',{
		title:'我的第一个组件',
		width:400,   //Number型，也可以是字符串类型 width:'90%'
		height:300,
		layout:'fit',
		constrain:true,          //限制窗口不超出浏览器边界
		constrainHeader:true,    // 不允许该窗体标题超出浏览器边界
		modal:true,              //设置一个模态窗口
		plain:true,
		icon:'js/ExtJs/icons/used/browser_window.png',               //图片路径
		iconCls:'',             //css样式
		x:50,
		y:50,
		html:'
我是一个div
我是第二个div
',
		autoScroll:true,
		renderTo:Ext.getBody()   //新创建的组件 渲染到什么位置
		
	}).show();                   //需要此方法，因为默认是隐藏的
	
});

• ExtWeb实战300例：

– 例1:点击按钮打开一个window，window重复创建的问题

• 重点分析：这个问题是初学者经常会犯错的地方，一般来说简单的代码不会产生此问题，但是如果以后代码复杂以后，这个问题如果发生调试起来会非常麻烦！！

Ext.onReady(function(){
    //ex001:点击一个按钮，打开一个新的窗体

    //JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
    var btn = Ext.get('btn');       //这个元素是经过Ext包装的一个Ext的Dom对象
    alert(btn.value);   //undefined
    alert(btn.dom.value);
    btn.on('click',function(){
        if(!Ext.getCmp('mywin')){
        Ext.create('Ext.window.Window',{
            id:'mywin',   //如果给组件加了一个id，那么这个组件就会被Ext所管理
            title:'新窗体',
            height:200,
            width:300,
            renderTo:Ext.getBody()
//          modal:true
        }).show();}
    });
});

Ext.onReady(function(){
	//ex001:点击一个按钮，打开一个新的窗体
	
	//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
	var btn = Ext.get('btn');       //这个元素是经过Ext包装的一个Ext的Dom对象
	alert(btn.value);   //undefined
	alert(btn.dom.value);
	btn.on('click',function(){
		if(!Ext.getCmp('mywin')){
		Ext.create('Ext.window.Window',{
			id:'mywin',   //如果给组件加了一个id，那么这个组件就会被Ext所管理
			title:'新窗体',
			height:200,
			width:300,
			renderTo:Ext.getBody()
//			modal:true
		}).show();}
	});
});

第二种实现：

var win = Ext.create('Ext.window.Window',{
        id:'mywin',   //如果给组件加了一个id，那么这个组件就会被Ext所管理
        title:'新窗体',
        height:200,
        width:300,
        renderTo:Ext.getBody(),
        closeAction:'hide'   //closeAction默认是destroy，销毁
    });
Ext.get('btn').on('click',function(){
    win.show();
});

	var win = Ext.create('Ext.window.Window',{
			id:'mywin',   //如果给组件加了一个id，那么这个组件就会被Ext所管理
			title:'新窗体',
			height:200,
			width:300,
			renderTo:Ext.getBody(),
			closeAction:'hide'   //closeAction默认是destroy，销毁
		});
	Ext.get('btn').on('click',function(){
		win.show();
	});

例2: 在window中添加子组件，并讲解常用查找组件的方式：
重点分析：该实例主要针对于组件的查找进行详细的讲解，在以后的应用开发中，应该学会各种方式去查找所需要的组件，不要拘泥于某种特定形式，这样会给开发思路带来很多好处。
- ownerCt
- up/down方法
- Ext.getCmp方法

添加子组件：

Ext.onReady(function(){
//在组件中添加子组件，并进行一系列针对于组件的操作
    var win = new Ext.window.Window({
        title:'添加子组件',
        width:400,
        height:300,
        renderTo:Ext.getBody(),
        draggable:false,        //不允许拖拽
        resizable:false,         //不允许改变大小
        closable:false,            //不显示关闭按钮
        collapsible:true,            //允许折叠
        bodyStyle:'background:#ffc;padding:10px',   //设置样式
        html:'我是window的内容',
        //Ext items（array）  配置子组件的配置项
        items:[{
        //Ext的组件给我们提供了一个简单地写法  xtype属性去创建组件
        xtype:'panel',
        width:'50%',
        height:100,
        html:'我是面板'
        },
        //第二种方法，直接new一个对象
        new Ext.button.Button({
            text:'我是按钮new',
            handler:function(){
                alert('我被点击了');
                alert(this.text);
            }
        })
//          {        //第一种方法，使用xtype声明
//      xtype:'button',
//      text:'我是按钮',
//      handler:function(btn){
//          alert('我被点击了');
//          alert(btn.text);
//      }
//
//      }

        ]
    });
    win.show();
});

Ext.onReady(function(){
//在组件中添加子组件，并进行一系列针对于组件的操作
	var win = new Ext.window.Window({
		title:'添加子组件',
		width:400,
		height:300,
		renderTo:Ext.getBody(),
		draggable:false,        //不允许拖拽
		resizable:false,         //不允许改变大小
		closable:false,            //不显示关闭按钮
		collapsible:true,            //允许折叠
		bodyStyle:'background:#ffc;padding:10px',   //设置样式
		html:'我是window的内容',
		//Ext items（array）  配置子组件的配置项
		items:[{
		//Ext的组件给我们提供了一个简单地写法  xtype属性去创建组件
		xtype:'panel',
		width:'50%',
		height:100,
		html:'我是面板'
		},
		//第二种方法，直接new一个对象
		new Ext.button.Button({
			text:'我是按钮new',
			handler:function(){
				alert('我被点击了');
				alert(this.text);
			}
		})
//			{        //第一种方法，使用xtype声明
//		xtype:'button',
//		text:'我是按钮',
//		handler:function(btn){
//			alert('我被点击了');
//			alert(btn.text);
//		}
//		
//		}
		
		]
	});	
	win.show();
});

操作子组件：

//在组件中操作子组件
var win = new Ext.Window({
    id:'mywin',
    title:'操作组件的形式',
    width:500,
    height:300,
    renderTo:Ext.getBody(),
    //表示在当前组件的top位置添加一个工具条，工具条中包含几个按钮，使用数组形式
    tbar:[{             //bbar(bottom)   lbar(leftbar)  rbar(rightbar  fbar(footbar))
        text:'按钮1',
        handler:function(btn){
            //组件都会有up和down这两个方法，表示向上或向下查找，需要参数是组件的xtype或者选择器
            alert(btn.up('window').title);
        }
    },{
        text:'按钮2',
        handler:function(btn){
            //最常用的方式
            alert(Ext.getCmp('mywin').title);
        }
    },{
        text:'按钮3',
        handler:function(btn){
            //以上一级组件的形式去查找OwnerCt
            alert((btn.ownerCt.ownerCt).title);
        }
    }]
});
win.show();

	//在组件中操作子组件
	var win = new Ext.Window({
		id:'mywin',
		title:'操作组件的形式',
		width:500,
		height:300,
		renderTo:Ext.getBody(),
		//表示在当前组件的top位置添加一个工具条，工具条中包含几个按钮，使用数组形式
		tbar:[{             //bbar(bottom)   lbar(leftbar)  rbar(rightbar  fbar(footbar))
			text:'按钮1',
			handler:function(btn){
				//组件都会有up和down这两个方法，表示向上或向下查找，需要参数是组件的xtype或者选择器
				alert(btn.up('window').title);
			}
		},{
			text:'按钮2',
			handler:function(btn){
				//最常用的方式
				alert(Ext.getCmp('mywin').title);
			}
		},{
			text:'按钮3',
			handler:function(btn){
				//以上一级组件的形式去查找OwnerCt
				alert((btn.ownerCt.ownerCt).title);
			}
		}]         
	});
	win.show();

例3: windowGroup对象 操作window组
重点分析：该实例主要目的针对于特殊需求进行具体的实现，利用windowGroup去操作多个窗体同步执行某些任务，这有点类似于javascript里的组合模式，原理就是上级负责执行一个动作但并不真正去执行，而是分别传递给所有的下级组件去具体执行。
- register
- hideAll
- each

Ext.onReady(function(){
//用windowGroup对象去操作多个window窗口（4.0后，叫做ZIndexManager）

    var wingroup = new Ext.WindowGroup();
    for(var i = 1; i<= 5;i++){
        var win = Ext.create('Ext.Window',{
            title:'第' + i + '个窗口',
            id:'win_' + i,
            width:300,
            height:300,
            renderTo:Ext.getBody()
        });
        win.show();
        wingroup.register(win);         //把窗体对象注册给ZIndexManager

    }
    var btn1 = Ext.create('Ext.button.Button',{
        text:'全部隐藏',
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.hideAll();        //隐藏所有被管理起来的window组件
        }

    });

    var btn2 = new Ext.button.Button({
        text:'全部显示',
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.each(function(cmp){
                cmp.show();
            });
        }
    });

        var btn3 = new Ext.button.Button({
        text:'把第三个窗口显示最前',
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.bringToFront('win_3');  //把当前组件显示到最前端

        }
    });

    var btn4 = new Ext.button.Button({
        text:'把第五个窗口显示在最后',
        renderTo:Ext.getBody(),
        handler:function(){
            wingroup.sendToBack('win_5');  //把当前组件显示到最后

        }
    });
});

Ext.onReady(function(){
//用windowGroup对象去操作多个window窗口（4.0后，叫做ZIndexManager）
	
	var wingroup = new Ext.WindowGroup();
	for(var i = 1; i<= 5;i++){
		var win = Ext.create('Ext.Window',{
			title:'第' + i + '个窗口',
			id:'win_' + i,
			width:300,
			height:300,
			renderTo:Ext.getBody()
		});
		win.show();
		wingroup.register(win);         //把窗体对象注册给ZIndexManager
			
	}
	var btn1 = Ext.create('Ext.button.Button',{
		text:'全部隐藏',
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.hideAll();        //隐藏所有被管理起来的window组件
		}
		
	});
	
	var btn2 = new Ext.button.Button({
		text:'全部显示',
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.each(function(cmp){
				cmp.show();
			});
		}
	});
	
		var btn3 = new Ext.button.Button({
		text:'把第三个窗口显示最前',
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.bringToFront('win_3');  //把当前组件显示到最前端
			
		}
	});
	
	var btn4 = new Ext.button.Button({
		text:'把第五个窗口显示在最后',
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.sendToBack('win_5');  //把当前组件显示到最后
			
		}
	});
});

顶

0

踩

0

 

 

• 上一篇3、ExtJs——JavaScript基础
• 下一篇5、ExtJs——Ext基础架构--define定义一个类

我的同类文章

网页前台技术（14）

http://blog.csdn.net

• •EXTJS4 新特性之Ext.data.Model2014-09-25阅读474
• •11、ExtJs——数据模型2014-09-25阅读421
• •9、ExtJs——Ext基础架构--事件机制2014-09-24阅读561
• •7、ExtJs——Ext基础架构--动态加载js文件--很重要2014-09-19阅读3391
• •5、ExtJs——Ext基础架构--define定义一个类2014-09-17阅读6733

• •12、ExtJs——数据代理-proxy2014-09-25阅读852
• •10、ExtJs——类的声明、对象创建及关键字2014-09-24阅读598
• •8、ExtJs——Ext基础架构--Ext操作DOM2014-09-23阅读3235
• •6、ExtJs——Ext基础架构--认识Ext.js和Ext-more.js2014-09-19阅读1212
• •3、ExtJs——JavaScript基础2014-09-16阅读571

更多文章

参考知识库

jQuery知识库

5796关注|928收录

JavaScript知识库

9615关注|1395收录

AngularJS知识库

3269关注|480收录

更多资料请参考：

猜你在找

Extjs在Asp.Net中的应用开发 Windows Server 2012 Hyper-v 管理 Windows Server 2012 高可用性管理 在Windows下SVN的版本管理与实战 Windows Server 2012 DHCP Server 管理

ExtJS 常见问题解答 javascript变量的作用域--ExtJS scope必备法宝 EXTNET复杂布局二报表 Extjs的作用域讲解转载 JAVA开发全集

查看评论

  暂无评论

您还没有登录,请 [登录]或 [注册]

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

核心技术类目

全部主题 Hadoop AWS 移动游戏 Java Android iOS Swift 智能硬件 Docker OpenStack VPN Spark ERP IE10 Eclipse CRM JavaScript 数据库 Ubuntu NFC WAP jQuery BI HTML5 Spring Apache .NET API HTML SDK IIS Fedora XML LBS Unity Splashtop UML components Windows Mobile Rails QEMU KDE Cassandra CloudStack FTC coremail OPhone CouchBase 云计算 iOS6 Rackspace Web App SpringSide Maemo Compuware 大数据 aptech Perl Tornado Ruby Hibernate ThinkPHP HBase Pure Solr Angular Cloud Foundry Redis Scala Django Bootstrap