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练习
猜你喜欢
转载自syyzxq.iteye.com/blog/2213614
今日推荐
周排行