7.1 Ext.MessageBox
1 7.1 Ext.MessageBox
2
3 7.1.1 Ext.MessageBox.alert()
4 Ext.MessageBox.alert('标题','内容',function(btn){
5
6
7
8 alert('你刚刚点击了'+btn);
9 });
10
11 7.1.2 Ext.MessageBox.confirm()
12
13 Ext.MessageBox.confirm('选择框','你要选择yes还是no?',function(btn){
14 alert('你刚刚点击了'+btn);
15 });
16
17
18 7.1.3 Ext.MessageBox.prompt()
19
20
21 Ext.MessageBox.prompt('输入框','你输入帐号',function(btn,text){
22 alert('你刚刚点击了'+btn+',你刚刚输入了'+text);
23 });
24
25
7.2 对话框的更多配置
1 7.2 对话框的更多配置--show()
2 7.2.1 可以输入多行的输入框
3 Ext.MessageBox.show({
4 title:'多行输入框',
5 msg:'你可以输入好几行',
6 width:300,
7 buttons:Ext.MessageBox.OKCANCEL,
8 multiline:true,
9 fn:function(btn,text){
10 alert('你刚刚点击了'+btn+',你刚刚输入了'+text);
11 }
12 });
13
14 7.2.2 自定义对话框的按钮
15 Ext.MessageBox.show({
16 ...
17 buttons:Ext.MessageBox.YESNOCANCEL,
18
19 ..
20 });
21
22 7.2.3 进度条
23
24 Ext.MessageBox.show({
25 title:'请等待',
26 msg:'读取数据中',
27 width:240,
28 progress:true,
29 closable:false
30 });
31 var f = function(v){
32 return function(){
33 if(v == 11){
34 Ext.MessageBox.hide();
35 }else{
36 Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个,一共10个');
37
38 }
39 };
40 };
41 for(var i=1; i<12; i++){
42 setTimeout(f(i),i*1000);
43
44 }
45
46 Ext.MessageBox.progress('请等待',msg:'读取数据中');
47 >2.自动变化的进度条提示框
48 Ext.MessageBox.wait('请等待',msg:'读取数据中');
49
50 7.2.4 动画效果
51
52
53 Ext.MessageBox.show({
54 ...
55 animEl:'dialog'
56
57 });
58
59
60
7.3 Ext.Window的常用属性
1 7.3 Ext.Window的常用属性
2 7.3.1 创建窗口--Ext.Window
3 var win = new Ext.Window({
4 layout:'fit',
5 width:500,
6 height:300,
7 closeAction:'hide',
8 closable:false,
9 draggable:true,
10 items:[{}],
11 buttons:[{
12 text:'按钮'
13 }]
14 });
15 win.show();
16
17
18
19 7.3.1 窗口的最大化和最小化
20 var win = new Ext.Window({
21 ..
22 minimizable:true,
23 maximizable:true
24 });
25
26 7.3.3 窗口的隐藏与销毁
27 >1.closeAction:'close'
28
29 >2.closeAction:'hide'
30
31 >3.Ext.Window.hide()/.show()
32
33 >4.closable:false
34
35 7.3.4 防止窗口超出浏览器边界
36 >1.constrain:true
37
38 >2.constrainHeader:true
39
40
41 7.3.5 设置窗口中的按钮
42
43 var win = new Ext.Window({
44 ...
45 defaultButton:0,
46 buttons:[{
47 text:'确定',
48 handler:function(){
49 win.hide();
50 }
51 },{
52 text:'取消'
53 }]
54 });
55 win.show();
56
57 7.3.6 窗口的其他配置选项
58
59
60 var win = new Ext.Window({
61 width:300,
62 height:100,
63 closeAction:'hide',
64 resizable:true,
65 resizeHandles:'se',
66 modal:true,
67 animateTarget:'target',
68 plain:true
69 });
70 Ext.get('target').on('click',function(){
71 win.show();
72 })
73 <button id="target">target</button>
7.4 窗口分组
1 7.4 窗口分组
2
3
4 var i = 0;
5 function newWin() {
6 var id=i++;
7 var win=new Ext.Window({
8 headerPosition:'top',
9 title:'窗口'+id,
10 width:400,
11 height:300,
12 maximizable:true
13 });
14 win.show();
15 };
16 function toBack() {
17 Ext.WindowManager.sendToBack(Ext.windowManager.getActive());
18
19
20 };
21 function hideAll() {
22 Ext.WindowManager.hideAll();
23 };
24 Ext.onReady(function(){
25 Ext.get('btn').on('click',newWin);
26 Ext.get('btnToBack').on('click',toBack);
27 Ext.get('btnHide').on('click',hideAll);
28 });
7.5 向窗口中放入各种控件
1 7.5 向窗口中放入各种控件
2
3 7.5.1 在窗口中加入表格
4
5
6 var columns = [...];
7 var data = [...];
8 var store = new Ext.data.ArrayStore({...});
9 store.load();
10 var grid = new Ext.grid.GridPanel({
11 store:store,
12 columns:columns,
13 layout:'fit'
14 });
15
16 var win = new Ext.Window({
17 layout:'fit',
18 width:500,
19 height:300,
20 closeAction:'hide',
21 items:[grid],
22 buttons:[{text:'按钮'}]
23 });
24
25 7.5.2 在窗口中加入表单
26
27
28 var form = new Ext.form.FormPanel({
29 defaultType:'textfield',
30 items:[{
31 fieldLabel:'文本',
32 name:'text'
33 },{
34 fieldLabel:'日期',
35 name:'data',
36 xtype:'datafield'
37 }]
38 });
39 var win = new Ext.Window({
40 layout:'fit',
41 title:'嵌套表单',
42 items:[form],
43 buttons:[{text:'按钮'}]
44 });
45 win.show();
46
47 7.5.3 复杂布局
48
49 var tabs = new Ext.TabPanel({
50 region:'center',
51 margins:'3 3 3 0',
52 activeTab:0,
53 defaults:{autoScroll:true},
54 items:[{
55 title:'默认',
56 html:'tab1'
57 },{
58 title:'可关闭标签',
59 html:'tab2',
60 closable:true
61 }]
62 });
63 var nav = new Ext.Panel({
64 title:'可折叠导航',
65 region:'west',
66 split:true,
67 collapsible:true,
68 margins:'3 0 3 3',
69 cmargins:'3 3 3 3'
70 });
71 var win = new Ext.Window({
72 title:'窗口嵌套可折叠和Tabs',
73 layout:'border',
74 closable:true,
75 width:600,
76 height:350,
77 border:false,
78 items:[nav,tabs]
79 });
80 win.show();