extjs Ext模态窗口、表单面板

extjs Ext模态窗口

⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️

Ext.window.Window

概述

A specialized panel intended for use as an application window. Windows are floated, resizable, and draggable by default. Windows can be maximized to fill the viewport, restored to their prior size, and can be minimized.

一个特别的面板专门用于应用窗口。窗口默认是浮动的、可伸展，和可拖拽。窗口可以最大化填充视图，
恢复到之前的大小，以及可以最小化。

Windows can also be linked to a Ext.ZIndexManager or managed by the Ext.WindowManager to provide grouping, activation, to front, to back and other application-specific behavior.

By default, Windows will be rendered to document.body. To constrain a Window to another element specify renderTo.

默认情况下，窗口渲染到document.body。强迫窗口渲染到其它元素通过指定renderTo参数。

As with all Ext.container.Containers, it is important to consider how you want the Window to size and arrange any child Components. Choose an appropriate layout configuration which lays out child Components in the required manner.

同其它Ext容器一样，考虑你的窗口中所有子组件的大小以及排列（布局）很重要。选择一个合适布局配置可以布局子组件以需要的方式。

官方示例代码：

Ext.create('Ext.window.Window', {
    
    
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {
    
      // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        columns: [{
    
    header: 'World'}],                 // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {
    
    }) // A dummy empty data store
    }
}).show();   

总结：

1. Ext.window.Window组件的作用是在页面创建一个窗口，这个窗口做为容器，可以在里面加入
   grid、form等组件。

autoShow:true配置参数，会自动显示你创建的window对象。
否则，即使创建了该组件对象也不显示出来窗口，需要调对象的.show()方法让界面显示出来。

该组件还可以做为模态窗口打开。模态窗口就是指，只有模态窗口可以操作，它背后的东西
被遮罩，不能操作。通过组件的modal:true,配置项，来创建模态窗口。

/**
* form 定义类
*/
Ext.define('Kitchensink.form.JWindow', {
    
    
	extend: 'Ext.window.Window',
	alias: 'JWindow',
	modal:true,//模态
	constrainHeader: true,
	scrollable: 'y',	
	autoShow:true,//自动弹出
	maximizable:false,//最大化
	layout: 'fit'//自适应布局
});

Ext.define('Kitchensink.form.JPanel', {
    
    
	extend: 'Ext.form.Panel',
	alias: 'widget.JPanel',
	bodyPadding: 10,// 离四边的距离
	autoScroll : true,// 自动出现滚动条
	width : '100%',
	fieldDefaults: 
	{
    
    
		labelAlign: 'right', // 文字对齐方式
		labelWidth: 100  // 标签宽度
	}
});

//创建对象
Ext.create('JWindow', 
{
    
    
    title : '标题',
    autoShow: true,
    width:500,  //指定窗口的大小
    bodyPadding: 5,
    items: [{
    
    
        xtype:'JPanel',
        border:false,
        items:[
        ]                
        //...
    }],
    buttons : 
    [
        //...
    ]
});

2. 使用
   在MVC的control中，这里的引用dailog在ext-extiion定义 window.Window的别名

//ext-extions中
	Ext.define("Kitchensink.view.Dialog",{
    
    
		extend:'Ext.window.Window',
		alias: 'widget.dialog',
		width: 500,
		maxHeight: 500,	
		fixed: true,
		scrollable: 'y',
		modal: true,
		constrainHeader: true,
		buttons: 
		[
			 {
    
    
				 text: '重置',
				 name: 'reset',
				 minWidth: 62			 
			 },
			 {
    
    
				 text: '保存',
				 minWidth: 62,
				 name: 'submit'
				 
			 },
			 {
    
    
				 text: '取消',
				 minWidth: 62,
				 cls:'btn-light',
				 handler: function() 
				 {
    
    
					this.up('window').close();
				 }			 
			 }
		],	
		listeners:
		{
    
    
			'beforeadd': function(win, component, index, eOpts)
			{
    
    			
				win.removeAll(true);		
			},
			'afterlayout': function(win, layout, eOpts)
			{
    
    
				win.scrollTo(0, Infinity);
			}
		}
	});

//control中
		refs: [
				{
    
    
					ref: 'dialog', 
					selector: 'dialog', 
					autoCreate: true,
					xtype: 'dialog'
				}
			],

//在控制器中绑定事件触发
			var dialog = this.getDialog();
			dialog.setConfig('title', '新增规则');
			dialog.setConfig('width', 660);
			dialog.add({
    
     xtype: 'sqlinjectrule_form', defaultSelect: true });
			dialog.show();
			dialog.flag = 'add';	

可以看到，调用实例的 setConfig add show 方法，查看学习Ext.window.Window
这些方法：

设置一个或多个配置项
setConfig ( name , [value] ) : Ext.Base CHAINABLE
Sets a single/multiple configuration options.
PARAMETERS
name : String / Object
The name of the property to set, or a set of key value pairs to set.
value : Object (optional)
The value to set for the name parameter.

add方法学习：
发现window.Window没有add方法，查看继承关系 继承自Ext.panel.Panel xtype: panel
来自panel的add方法，so
作用： 添加一个（多个）组件到这个容器。

表单面板

官方示例代码：
Ext.create(‘Ext.window.Window’, {
title: ‘Hello’,
height: 200,
width: 400,
layout: ‘fit’,
items: { // Let’s put an empty grid in just to illustrate fit layout
xtype: ‘grid’,
border: false,
columns: [{header: ‘World’}], // One header just for show. There’s no data,
store: Ext.create(‘Ext.data.ArrayStore’, {}) // A dummy empty data store
}
}).show();

学习总结：
Ext.window.Window组件的作用是在页面创建一个窗口，这个窗口做为容器，可以在里面加入
grid、form等组件。

autoShow:true配置参数，会自动显示你创建的window对象。
否则，即使创建了该组件对象也不显示出来窗口，需要调对象的.show()方法让界面显示出来。

该组件还可以做为模态窗口打开。模态窗口就是指，只有模态窗口可以操作，它背后的东西
被遮罩，不能操作。通过组件的modal:true,配置项，来创建模态窗口。

/**
* form 定义类
*/
Ext.define('Kitchensink.form.JWindow', {
    
    
	extend: 'Ext.window.Window',
	alias: 'JWindow',
	modal:true,//模态
	constrainHeader: true,
	scrollable: 'y',	
	autoShow:true,//自动弹出
	maximizable:false,//最大化
	layout: 'fit'//自适应布局
});

Ext.define('Kitchensink.form.JPanel', {
    
    
	extend: 'Ext.form.Panel',
	alias: 'widget.JPanel',
	bodyPadding: 10,// 离四边的距离
	autoScroll : true,// 自动出现滚动条
	width : '100%',
	fieldDefaults: 
	{
    
    
		labelAlign: 'right', // 文字对齐方式
		labelWidth: 100  // 标签宽度
	}
});

//创建对象
Ext.create('JWindow', 
{
    
    
    title : '标题',
    autoShow: true,
    width:500,
    bodyPadding: 5,
    items: [{
    
    
        xtype:'JPanel',
        border:false,
        items:[
        ]                
        //...
    }],
    buttons : 
    [
        //...
    ]
});