脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript开发指南之Extjs使用技巧，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
JavaScript开发指南之Extjs使用技巧。
Ext.onReady(function(){
//创建一个新的组件
Ext.create('Ext.window.Window',{
tITle:'nihao',
height:400,
width:200,
layout:'fit',
renderTo:Ext.getBody()//新创建的组件渲染到什么位置
}).show();
});
ConstraintHeader:不允许标题的窗口超出浏览器边界.
Modal:指定是不是模态窗口
autoScroll:滚动条
icon:通标(加图片路径)
iconCls:图片样式
Draggable:false,//不允许拖拽
resizable:false,//不允许改变大小
closable:false,//不显示关闭按钮
items:[//添加子组件
{
xtyPE:'panel',
width:'40%',
height:120,
htML:'我是面板'
},
{
xtype:'button',
text:'按钮',
handler:function(BTn){
alert(btn.text)
}
}],
tbar://表示向当前组件中的top位置添加工具条
[
{},
{}
],
Bbar:[{},{}]//在窗体底部添加状态栏
lbar:[{},{}]//在窗体左部添加状态栏
rbar:[{},{}]//在窗体右添加状态栏
fbar:[{},{}]//在窗体最最底部添加状态栏
凡是组件都会有up与down方法分别是查找父组件与查找子组件
Ext.getCom(‘id’)//通过id获取组件
xxx.ownerCt取这一级元素的上一级元素
Ext.onReady(function(){
//ex003:用windowGroup对象去操作多个window窗口
VAR wingroup = new Ext.WindowGroup();
for(var i = 1 ; i <=5;i++){
var win =Ext.create('Ext.Window',{
title:'第' + i + '个窗口' ,
id:'win_' + i ,
width:300 ,
height:300 ,
renderTo:Ext.getBody()
});
win.show();
wingroup.register(win); //把窗体对象注册给ZindeXManger
}
var btn1 =Ext.create('Ext.button.Button',{
text:'全部隐藏' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.hideAll(); //隐藏所有被管理起来的window组件
}
});
var btn2 = new Ext.button.Button({
text:'全部显示' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.each(function(cmp){
cmp.show();
});
}
});
var btn3 = new Ext.button.Button({
text:'把第三个窗口显示在最前端' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.bringToFront('win_3');//把当前的组件显示到最前端
}
});
var btn4 = new Ext.button.Button({
text:'把第五个窗口显示在最末端' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.sendToBack('win_5'); //把当前的组件显示到最后
}
});
});
config:配置项就是配置当前配置项的属性内容，并且会自动加上get与set 方法,
Ext中定义一个类
Ext.define(‘Person’,{
Config://用config定义参数这样的话就自动生成了get与set 方法
{
Age:’ds’
}
Say:function(){
Alert(我是方法)
}
Constructor:function(config){
Var me=this
Me.initConfig(config);//通过构造函数初始化参数
}
});
Ext底层继承得javaScript实现
Ext静态块
Ext:requires,uses,singlon
Ext.apply&Ext.applyIf
Ext方法覆盖
//Ext对原生javascript对象的扩展
//提示信息
/* Ext.MessageBox.alert('我是标题!' , 'Hello World!' , function(){
console.info(this);
alert('我是回调函数!');
} ,this);
Ext.Msg.alert('提示信息','ExtJS!!!');*/
//询问框
Ext.Msg.confirm('提示信息','确认删除该条记录么?',function(op){
// yes on
if(op == 'yes'){
alert('确认了!');
}else{
alert('取消了!');
}
});
//输入框
//String title, String msg,[Function fn], [Object scope], [Boolean/Number multiline], [String value]
Ext.Msg.prompt('我是标题!','请输入姓名:' , function(op, val){
//op ok cancel
console.info(op);
console.info(val);
} , this , true , '张三');
//等待框也就是我们所说的进度条
Ext.Msg.wait('提示信息','我是内容' ,{
interval:400, //循环定时的间隔
duration:2000, //总时长
increment:5, //执行进度条的次数
text:'更新中,请稍后...', //进度条上的文字
scope:this,
fn:function(){
alert('更新成功!');
},
aniMATE:true //更新渲染时提供一个动画效果
});
//show方法
Ext.Msg.show({
title:'我是自定义的提示框!!' ,
msg:'我是内容!!' ,
width:300 ,
height:300 ,
buttons:Ext.Msg.YESNOCANCEL ,
icon:Ext.Msg.WARNING // ERROR INFO QUESTIONWARNING
});
// 第二个作用: 通常用于递归操作
// arguments.callee 表示引用当前函数本身
function fact(number){
if(number <= 1){
return 1 ;
}else{
returnnumber*arguments.callee(number-1);
}
};
// This 关键字在javascript里的使用
//this关键字总是指向调用者，谁调用函数，this就指向谁
var x = 5; // window.x = 5 ;
function test(){
alert(this.x);
};
test.x = 10;
window.test();
// call apply 主要作用是绑定作用域
var color = 'red';
var obj = {color:'yellow'};
//
function showColor(x,y,z){
alert(x+y+z);
alert(this.color);
};
//// call、apply 绑定一个函数，到你指定的作用域内执行
showColor.call(obj,10,20,30);
showColor.apply(obj,[2,3,4]);
//定义了一个js的类
var Person = function(name , age){
this.name = name ;
this.age = age ;
// PRivate
var _sex = '男'; //js的私有属性
this.getSex = function(){
return _sex ;
};
this.setSex = function(sex){
_sex= sex ;
};
};
//单体模式: 闭包单体
var SXT = (function(){
var Array = {
each:function(){
alert('each...');
}
};
return {
arrayEach:function(){
Array.each();
}
};
})();
SXT.arrayEach();
Ext.onReady(function(){
//Ext.create方法相当于创建一个实例对象
Ext.create('Ext.window.Window',{
title:'我的第一个组件,window' ,
width:400, //Number型 也可以是字符串类型 width: '90%'
height:300,
layout:'fit' ,
constrain:true , //限制窗口不超出浏览器边界
modal:true , //设置一个模态窗口
//plain:true ,
icon:'js/extjs/icons/used/browser_window.png',//字符串参数,图片的路径
//iconCls:'' , //CSS样式
x:50,
y:50,
autoScroll:true, //添加滚动条
html:'
我是一个p我是第二个p' ,
constrainHeader:true, //不允许该窗口的title超出浏览器边界
renderTo:Ext.getBody() //新创建的组件渲染到什么位置
}).show();
});
var btn = Ext.get('btn');//这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);
btn.on('click',function(){
if(!Ext.getCmp(';mywin')){
Ext.create('Ext.window.Window',{
id:'mywin' , //如果你给组件加了一个id 那么这个组件就会被Ext所管理
title:'新窗体' ,
height:300,
width:400,
renderTo:Ext.getBody()//,
//modal:true
}).show();
}
});
//第二种实现
var win = Ext.create('Ext.window.Window',{
title:'新窗体' ,
height:300,
width:400,
renderTo:Ext.getBody(),
closeAction:'hide' //closeAction默认是destroy
});
Ext.get('btn').on('click',function(){
win.show();
});
//ex002 : 在组件中添加子组件 ,并进行一系列针对于组件的操作
//在组件中添加子组件：
var win = new Ext.window.Window({
title:"添加子组件实例" ,
width:'40%' ,
height:400,
renderTo:Ext.getBody(),
draggable:false , //不允许拖拽
resizable:false , //不允许改变窗口大小
closable:false, //不显示关闭按钮
collapsible:true , //显示折叠按钮
bodyStyle:'background:#ffc; padding:10px;' , // 设置样式
html:'我是window的内容!!' ,
//Ext items(array) //配置子组件的配置项
items:[{
//Ext的组件给我们提供了一个简单的写法 xtype属性去创建组件
xtype:'panel',
width:'50%',
height:100,
html:'我是面板'
},
new Ext.button.Button({
text:'我是按钮' ,
handler:function(){
alert('执行!!');
}
})
{
xtype:'button' ,
text:'我是按钮',
handler:function(btn){
alert('我被点击了');
alert(btn.text);
}
}
]
});
win.show();
var win = new Ext.Window({
id:'mywin' ,
title:'操作组件的形式' ,
width:500,
height:300,
renderTo:Ext.getBody(),
//表示在当前组件的top位置添加一个工具条里面默认的都是按钮
tbar:[{ //bbar(bottom)lbar(leftbar) rbar(rightbar) fbar(footbar)
text:'按钮1' ,
handler:function(btn){
//组件都会有 up、down 这两个方法(表示向上、或者向下查找) 需要的参数是组件的xtype或者是选择器
alert(btn.up('window').title);
}
},{
text:'按钮2' ,
handler:function(btn){
//最常用的方式
alert(Ext.getCmp('mywin').title);
}
},{
text:'按钮3' ,
handler:function(btn){
//以上一级组件的形式去查找 OwnerCt
//console.info(btn.ownerCt);
alert(btn.ownerCt.ownerCt.title);
}
}]
});
win.show();
//ex003:用windowGroup对象去操作多个window窗口
var wingroup = new Ext.WindowGroup();
for(var i = 1 ; i <=5;i++){
var win = Ext.create('Ext.Window',{
title:'第' + i + '个窗口' ,
id:'win_' + i ,
width:300,
height:300,
renderTo:Ext.getBody()
});
win.show();
wingroup.register(win); //把窗体对象注册给ZindexManger
}
var btn1 = Ext.create('Ext.button.Button',{
text:'全部隐藏' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.hideAll(); //隐藏所有被管理起来的window组件
}
});
var btn2 = new Ext.button.Button({
text:'全部显示' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.each(function(cmp){
cmp.show();
});
}
});
var btn3 = new Ext.button.Button({
text:'把第三个窗口显示在最前端' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.bringToFront('win_3'); //把当前的组件显示到最前端
}
});
var btn4 = new Ext.button.Button({
text:'把第五个窗口显示在最末端' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.sendToBack('win_5'); //把当前的组件显示到最后
}
});
//在Ext中如何去定义一个类: Ext.define(classname , properties , callback)
Ext.define('Person',{
//这里是对于这个类的一些配置信息
//config属性就是配置当前类的属性内容,并且会加上get和set方法
config:{
name:'z3' ,
age:20
},
//自己定义的方法
say:function(){
alert('我是方法...');
},
//给当前定义的类加一个构造器 ,目的就是为了初始化信息
constructor:function(config){
var me = this ;
// for(varattr in config){
// alert(attr+ " : " + config[attr]);
// }
me.initConfig(config); // 真正的初始化传递进来的参数
}
});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript开发指南之Extjs使用技巧全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript开发指南之Extjs使用技巧所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。