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();
});
相关推荐
一些ext练习例子，一些ext练习例子，
这个"extjs练习工程0416"显然是一个学习和实践ExtJS的项目，可能是为了掌握其核心概念、组件库和布局管理。在这个项目中，我们可以看到两个主要的文件夹：`src`和`WebRoot`。 `src`目录通常包含所有源代码，包括...
自已写的一个小工程。extjs练习工程0309
自已写的一个小工程,extjs练习工程0329
初学者extjs的练习，有详细的说明，初始页是index.jsp是设计的目录
自已写的extjs练习
这个"extjs0306练习工程"显然是一位开发者使用ExtJS进行实践的项目，可能是为了掌握或巩固ExtJS的相关技能。在这个项目中，我们可以看到两个主要的文件夹：`src`和`WebRoot`。 `src`目录通常包含项目的源代码。在...
Extjs4.2练习小Demo，新手第一次上传啦，多要点分好下载更多的资源的说
自已写的一个工程，extjs4练习工程0211
从给定的文件信息来看，我们正在探讨的是ExtJS框架中的布局管理技术。ExtJS是一个用JavaScript编写的开源用户界面库，它提供了大量的组件和工具，用于构建复杂的、响应式的Web应用程序。布局管理是ExtJS的一个核心...
haha廖的ext：extjs制作的小练习代码
同时，实践是检验理论的最好方式，配合实例练习，能更有效地掌握ExtJS的开发技能。 在使用过程中，要特别注意ExtJS的MVC（Model-View-Controller）架构，这是其设计的一大亮点。通过模型管理数据，视图展示数据，...
ExtJS是一种基于JavaScript的开源富客户端框架，专为构建企业级Web应用程序而设计。它提供了丰富的组件库，包括数据绑定，强大的布局管理，以及...在学习过程中，建议结合实际编码练习，以便更好地消化和应用所学知识。
ExtJS入门文档，登录界面实例。包含实用开发指南。
ExtJS是一种基于JavaScript的开源富客户端框架，专用于构建功能丰富的、交互式的Web应用程序。它提供了大量的组件，如...通过系统的阅读和练习，你将能够熟练掌握这一强大的前端开发工具，并应用于实际的项目开发中。
ExtJS4是一个强大的JavaScript框架，主要用于构建富客户端的Web应用程序。它提供了丰富的组件库和一套完整的MVC...在实践中不断学习和练习，你将能够熟练掌握ExtJS4的MVC模式，为开发高质量的Web应用打下坚实基础。
综上所述，"EXTJS2.2开发实战项目"不仅是一个实战练习，更是一个深入理解EXTJS2.2、Java和JavaScript结合开发的宝贵案例。通过对这个项目的学习，开发者可以提升EXTJS的使用技能，理解Web应用程序的完整生命周期，并...
- 练习创建GridPanel和FormPanel，熟悉数据绑定和验证。 - 学习如何使用图表组件进行数据可视化。 - 了解Ajax通信的实现，掌握发送异步请求的方法。 - 实践事件处理，理解事件监听和触发的机制。 - 尝试定制自己的...
EXTJS 是一个强大的JavaScript库，专门用于构建富客户端应用程序。这个基础教程将引导你逐步了解EXTJS的核心概念，包括组件模型、容器模型、布局...记得结合实际项目练习，理论与实践相结合，才能更好地提升EXTJS技能。