EXTJS学习总结(A)
extjs 视频总结
在引入包的时候.顺序必须是：ext-all.css
ext-base.js ext-all.js
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css">
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.3.1/ext-all.js"></script>
执行ext代码开始:
var button= Ext.onReady({
text:'这个是BUTTON',
renderTo:document.Body --这个可以是body 也可以是对应是下面的ID；
minWidth:100--最小宽度
--句饼 指定默认事件的出发 下面代表的是click事件
handler:function(){}
--上面是实现事件的一中方式 下面
listeners:{"click":function(){--对应的方法}
}
});
--下面这句可以更改button的值
button.text ='NewButton';
--下面的也可以出发对应的时间.这个只是在代码已经构建完成 时候会使用
button.on("click",function(){
--对应的方法体
});
-----------文本框 TextFiled
var txt=new Ext.form.TextField({
fieldLabel:"姓名",
renderTo:Ext.getBody()
});--这样的filedLabel是不会显示的
--要指定布局 下面的方式可以解决
var panel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:"form",
labelWidth:300,
listeners:{
"render":function(panel){
panel.add(new Ext.form.TextField({
id:"text_name",
fieldLabel:"姓名"
}));
}}
})；
--用上面的button获取这个text的值
var button = new Ext.Button({
renderTo:document.body,
text:"BUtton",
handler:function(){
alert(Ext.getCmp("text_name").getValue());
}
});
---这种方式也可以添加button
//另外一中添加button的方式 是在对象还没渲染之前添加的button render 就是渲染 相当于持久化
//另外一中添加button的方式
//另外一中添加button的方式
var panel2 = new Ext.Panel({
title:'你的信息',
frame:true,//这个是把四个角变成圆角
width:300,
height:300
});
panel2.addButton({text:"确定",minWidth:100});
panel2.addButton(new Ext.Button({text:"取消",minWidth:100}));
/**renderTo 是把元素放到对应的元素的里面
appleToMarkup 是放在指定元素的上面**/
//panel2.render(Ext.getBody());
panel2.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",// 标识的是class
cn:[{
tag:"div",
cls:"center"//居中 表示的是class
}]
},true).child("div"));//得到div
---添加其他的控件
panel2.add({xtype:"textfield",fieldLabel:"你的笨蛋"});
-----一个登录小页面的完成
<script type="text/javascript">
//这是一个小小的登录
Ext.onReady(function(){
var panel = new Ext.Panel({
title:'登录测试',
width:280,
height:130,
frame:true,
layout:"form",
labelWIdth:45,
listeners:{
"render":function(panel){
panel.add({xtype:"textfield",fieldLabel:"帐号",width:159});
panel.add({xtype:"textfield",fieldLabel:"密码",width:159});
}
}
});
panel.addButton({text:"确定"});
panel.addButton({text:"取消"});
panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div"));
});
</script>
<script type="text/javascript">
//这是一个小小的登录 是上面登录简单的写法 也是常用的写法
Ext.onReady(function(){
var panel = new Ext.Panel({
title:'登录测试',
width:280,
height:130,
frame:true,
layout:"form",
labelWIdth:45,
defaults:{xtype:"textfield",width:159},
items:[{
fieldLabel:"帐号"
},{
fieldLabel:"密码"
}],
buttons:
[{text:"确定"},{text:"取消"
}]
});
panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div"));
});
</script>