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>