EXTJS练习

Ext.onReady(function() {
	Ext.QuickTips.init();

		//Ext.MessageBox.alert("hello", "HelloWorld"); //hello表示弹出框的标题。。HelloWorld表示弹出框的内容
		
	    var form = new Ext.form.FormPanel({
	        baseCls: 'x-plain',
	        layout:'absolute',
	        url:'save-form.php',
	        defaultType: 'textfield',
	        items: [{
	            x: 0,
	            y: 5,
	            xtype:'label',
	            text: 'Send To:'
	        },{
	            x: 60,
	            y: 0,
	            name: 'to',
	            anchor:'100%'  // anchor width by percentage
	        },{
	            x: 0,
	            y: 35,
	            xtype:'label',
	            text: 'Subject:'
	        },{
	            x: 60,
	            y: 30,
	            name: 'subject',
	            anchor: '100%'  // anchor width by percentage
	        },
	        	{
	            x: 0,
	            y: 65,
	            xtype:'label',
	            text: 'Send To:'
	        },{
	            x: 60,
	            y: 60,
	            name: 'subject',
	            anchor: '100%'  // ********
	        },{
	            x:0,
	            y: 90,
	            xtype: 'textarea',
	            name: 'msg',
	            anchor: '100% 100%'  // anchor width and height
	        }]
	    });
	    
    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        draggable :true,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            }),{
            	xtype:'fieldset',
                fieldLabel: 'Email',
                value:'小鲤鱼fieldeset',
                name: 'email',
                value:'s小鲜鱼',
                buttons:[{text:'button1'},{text:'button2'}]
            },new Ext.form.DisplayField({
            	xtype:'field',
                fieldLabel: 'Email',
                name: 'email',
                value:'s小鲜鱼'
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel',
            handler:function(){
            	simple.getForm().reset();
            },
            scope:this
        }]
    });
    simple.render(document.body);
	    var window = new Ext.Window({
	        title: 'Resize Me',
	        width: 400,
	        height:250,
	        minWidth: 300,
	        minHeight: 200,
	        x:350,
	        y:0,
	        layout: 'fit',
	        plain:true,
	        bodyStyle:'padding:5px;',
	        buttonAlign:'center',
	        items: form,
	        
	        buttons: [{
	            text: 'Send'
	        },{
	            text: 'Cancel'
	        }]
	    });

	    window.show();

			    var panel = new Ext.Panel(
					{
						title : 'Actions',
						width : 600,
						height : 300,
						bodyStyle : 'padding:5px;', // lazy inline
						html:"你好吗",

						tbar : [

								new Ext.Toolbar.SplitButton(
										{
											text : 'Split Button',
											handler : function() {
												Ext.MessageBox.alert("hello",
														"HelloWorld");
													
											},
											tooltip : {
												text : 'This is a an example QuickTip for a toolbar item',
												title : 'Tip Title'
											},
											iconCls : 'blist',
											// Menus can be built/referenced by
											// using nested menu config objects
											menu : {
												items : [
														{
															text : '<b>Bold</b>',
															handler : function(item) {
															
															var tm=new Ext.util.TextMetrics;
															var tw=tm.getTextWidth(item.text);
															Ext.Msg.alert("bold",tw);
															
															}
														},
														{
															text : '<i>Italic</i>',
															handler : function(
																	item) {
																Ext.MessageBox
																		.alert(
																				"hello",
																				item.text);
															}
														},
														{
															text : '<u>Underline</u>',
															handler : function(
																	item) {
																Ext.MessageBox
																		.alert(
																				"hello",
																				item.text);
															}
														},
														'-',
														{
															text : 'Pick a Color',
															handler : function(
																	item) {
																Ext.MessageBox
																		.alert(
																				"hello",
																				item.text);
															},
															menu : {
																items : [
																		new Ext.ColorPalette(
																				{
																					listeners : {
																						select : function(
																								cp,
																								color) {
																							Ext.MessageBox
																							.alert(
																											'Color Selected',
																											'You chose .'+color);
																						}
																					}
																				}),
																		'-',
																		{
																			text : 'More Colors...',
																			handler : function(
																					item) {
																				Ext.MessageBox
																						.alert(
																								"hello",
																								item.text);
																			}
																		} ]
															}
														},
														{
															text : 'Extellent!',
															handler : function(
																	item) {
																Ext.MessageBox
																		.alert(
																				"hello",
																				item.text);
																var dd=Ext.getCmp('ddd');
																dd.setDisabled(!dd.disabled);
															}
														} ]
											}
										}), { // <-- Add the action directly to a toolbar
									text : 'Action Menu',
									handler:function(item){
										
												var width=panel.getWidth();
													var pos=panel.getPosition();
													var iwidth=item.getWidth();
													var x=width-90+pos[0];
													var y=pos[1];
													Ext.Msg.alert(item.text,(width+"..."+pos[0]+"..."+iwidth+"..."+x+"..."+y));
												item.setPagePosition(0,1);
									},
									menu : [ {
										text : "ddd",
										id:'ddd',
										handler:function(item){
											Ext.MessageBox
											.wait(
													"hello",
													item.text,
													{  

												interval : 100,
												duration : 1000,
												fn : function() {
													Ext.MessageBox.hide();
												}
											});
										}
									} ]
								// <-- Add the action directly to a menu
								} ]//,

						//renderTo : 'smallwin'
					});
var win = new Ext.Window({
			title : "hello",
			id:"smallwin",
			width : 350,
			height : 350,
			x:350,
			y:250,
			//bodyStyle:'margin: 100px 0px 0px 100px',
			//animCollapse : true, 
			//animateTarget : Ext.getBody(),
			draggable :true,
			layout:'fit',
			renderTo:Ext.getBody()//,
			//items:panel,
			//html : '<h1>Hello,easyjf open source</h1>'
		});
			    win.add(panel);
			    Ext.get('smallwin').fadeIn({
					endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
					easing : 'easeOut',
					duration : 2
					});
			    win.show();
//console.log(win);
	var animData = [['fadeIn', 'fadeIn','淡入'], ['fadeOut', 'fadeOut','淡出'],
			['ghost', 'ghost','滑出并伴随着渐隐'], ['highlight', 'highlight','高亮显示'], ['puff', 'puff','渐隐元素的同时还伴随着向各个方向缓慢地展开'],
			['scale', 'scale','高度/宽度转换'], ['shift', 'shift','尺寸、位置坐标和(或)透明度'], ['slideIn', 'slideIn','滑入到视图中'],
			['slideOut', 'slideOut','滑出到视图中'], ['switchOff', 'switchOff','类似于关闭电视机']];
	var easingData = [['easeIn', 'easeIn:开始慢且加速'],
			['easeOut', 'easeOut:开始快且减速'], ['easeBoth', 'easeBoth:开始慢且减速'],
			['easeNone', 'easeNone:匀速'],
			['easeInStrong', 'easeInStrong:开始慢且加速,t的四次方'],
			['easeOutStrong', 'easeOutStrong:开始快且减速,t的四次方'],
			['easeBothStrong', 'easeBothStrong:开始慢且减速,t的四次方'],
			['elasticIn', 'elasticIn'], ['elasticOut', 'elasticOut'],
			['elasticBoth', 'elasticBoth'], ['backIn', 'backIn'],
			['backOut', 'backOut'], ['bounceIn', 'bounceIn'],
			['bounceBoth', 'bounceBoth']];
	var dirData=[['t','t','顶部'],['tl','tl','左上'],['tr','tr','右上'],['l','l','左边'],['r','r','右边'],['bl','bl','左下'],['br','br','右下'],['b','b','底部']];
			var animStore=new Ext.data.ArrayStore({
				fields:['funName','text','explain'],
				data:animData
			});
			var easeStore=new Ext.data.ArrayStore({
				fields:['easeName','text'],
				data:easingData
			});
			var dirStore = new Ext.data.ArrayStore({
				fields : ['dirName', 'text', 'explain'],
				data : dirData
			})
			var animCb=new Ext.form.ComboBox({
				tpl: '<tpl for="."><div ext:qtip="{explain}" class="x-combo-list-item">{text}</div></tpl>',
				store:animStore,
				displayField:'text',
				typeAhead:true,
				mode:'local',
				triggerAction:'all',
				emptyText:'选择一种动画',
				selectOnFocus:true
			});
			var easeCb=new Ext.form.ComboBox({
				store:easeStore,
				displayField:'text',
				typeAhead:true,
				grow:true,
				growMax:25,
				listWidth:250,
				mode:'local',
				triggerAction:'all',
				emptyText:'选择一种速度',
				selectOnFocus:true
			});
			var dirCb = new Ext.form.ComboBox({
				tpl : '<tpl for="."><div ext:qtip="{explain}" class="x-combo-list-item">{text}</div></tpl>',
				store : dirStore,
				displayField : 'text',
				typeAhead : true,
				mode : 'local',
				width:100,
				triggerAction : 'all',
				emptyText : '选择一个方向',
				selectOnFocus : true
			});
			var doAnim=function (funName,easing,dir){
				easing=easing||'easeOut';
				dir=dir||'t';
			switch(funName){
				case  'fadeIn':					
						Ext.get('smallwin').fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : easing,
									duration : 2
								});
								break;
				case 'fadeOut' :
				Ext.get('smallwin').fadeOut({
									endOpacity : 0,
									duration : 1.0,
									easing : easing
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
				break;	
				case 'ghost' :
				Ext.get('smallwin').ghost(dir, {
									easing : easing,
									duration : 1,
									remove : false,
									useDisplay : false
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
				break;	
				case 'frame' :
				Ext.get('smallwin').frame("FF0000", 1, {
									duration : 1
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
				break;	
				case 'highlight' :
				Ext.get('smallwin').highlight("ff0000", {
									attr : "color", // 可以是任何能够把值设置成颜色代码的 CSS 属性
									endColor : "ffffff",
									easing : easing,
									duration : 1
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
				break;	
				case 'puff' :
				Ext.get('smallwin').puff({
									easing : easing,
									duration : .5,
									remove : false,
									useDisplay : false
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
				break;	
				case 'scale' :
				Ext.get('smallwin').scale(450,450,{
									easing : easing,
									duration : .5
								}).pause(2).scale(350,350,{
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
				break;	
				case 'shift' :
				Ext.get('smallwin').shift({
									width:450,
									heith:450,
									x:100,
									y:100,
									easing : easing,
									duration : .5
								}).pause(2).shift({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									x:350,
									y:250,
									width:350,
									heith:350,
									easing : easing,
									duration : 2
								});
				break;	
				case 'slideIn' :
				Ext.get('smallwin').slideIn(dir,{
									easing : easing,
									duration : 1
								}).pause(2).slideIn(dir,{
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : easing,
									duration : 2
								});
				break;	
				case 'slideOut' :
				Ext.get('smallwin').slideOut(dir,{
									easing : easing,
									duration : .5
								}).pause(2).slideIn(dir,{
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : easing,
									duration : 2
								});
				break;	
				case 'switchOff' :
				Ext.get('smallwin').switchOff(dir, {
									easing : easing,
									duration : .5,
									remove : false,
									useDisplay : false

								}).pause(2).slideIn(dir,{
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : easing,
									duration : 2
								});
				break;	
			}
		};
var ctrolWin=new Ext.Window({
			title : "ctrolwin",
			id:"ctrolid",
			width : 200,
			height : 200,
			x:750,
			y:0,
			//bodyStyle:'margin: 100px 0px 0px 100px',
			//animCollapse : true, 
			//animateTarget : Ext.getBody(),
			draggable :true,
			layout:'column',
			renderTo:Ext.getBody(),
			items : [{
					text : 'fadeIn',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
					}
				}, {
					text : 'fadeOut',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').fadeOut({
									endOpacity : 0,
									duration : 1.0,
									easing : 'easeNone'
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
					}
				}, {
					text : 'ghostDown',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').ghost('b', {
									easing : 'easeOut',
									duration : 1,
									remove : false,
									useDisplay : false
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});

					}
				},{
					text : 'ghostUP',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').ghost('t', {
									easing : 'easeOutStrong',
									duration : 1,
									remove : false,
									useDisplay : false
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});

					}
				}, {
					text : 'frame',
					xtype : 'button',
					handler : function() {
						// 红色,1次,3秒
						Ext.get('smallwin').frame("FF0000", 1, {
									duration : 1
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
					}
				}, {
					text : 'highlight',
					xtype : 'button',
					handler : function() {
						// 红色,1次,3秒
						Ext.get('smallwin').highlight("ff0000", {
									attr : "color", // 可以是任何能够把值设置成颜色代码的 CSS 属性
									endColor : "ffffff",
									easing : 'easeIn',
									duration : 1
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});

					}
				},{
					text : 'puff',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').puff({
									easing : 'easeOut',
									duration : .5,
									remove : false,
									useDisplay : false
								}).pause(2).fadeIn({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
					}
				},{
					text : 'scale',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').scale(450,450,{
									easing : 'easeOut',
									duration : .5
								}).pause(2).scale(350,350,{
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
					}
				},{
					text : 'shift',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').shift({
									width:450,
									heith:450,
									x:100,
									y:100,
									easing : 'easeOut',
									duration : .5
								}).pause(2).shift({
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									x:350,
									y:250,
									width:350,
									heith:350,
									easing : 'easeOut',
									duration : 2
								});
					}
				},{
					text : 'slideIn',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').slideIn('r',{
									easing : 'easeOut',
									duration : .5
								}).pause(2).slideIn('tr',{
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
					}
				},{
					text : 'slideOut',
					xtype : 'button',
					handler : function() {
						Ext.get('smallwin').slideOut('bl',{
									easing : 'easeOut',
									duration : .5
								}).pause(2).slideIn('tr',{
									endOpacity : 1, // 可以是 0 到 1 之前的任意值(例如:.5)
									easing : 'easeOut',
									duration : 2
								});
					}
				},animCb,easeCb,{
					
					xtype:'compositefield',
					//anchor: '-20',
                    //msgTarget: 'side',
					fieldLabel:'动画方向',
					items : [{
								xtype : 'displayfield',
								value : '动画方向',
								margins:'2px 0 0 3px'
							}, dirCb]
					},{
					text : '查看效果',
					xtype : 'button',
					handler : function(){doAnim(animCb.getValue(),easeCb.getValue(),dirCb.getValue());}
				}]
			//html : '<h1>Hello,easyjf open source</h1>'
		});
		var mycookie=Ext.util.Cookies;
		var myString='ninihahaliesfd5';
		var endc=myString.charCodeAt(0)>>2;
		Ext.Msg.alert('cookie',myString.charCodeAt(0)+"."+endc+"."+myString.charAt(5)+"."+mycookie.toString());
ctrolWin.show();
});

 

你可能感兴趣的:(ExtJs)