EXTJS学习总结(A)

最新推荐文章于 2023-06-17 22:33:57 发布

原创最新推荐文章于 2023-06-17 22:33:57 发布 · 741 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #button #function #div #stylesheet #layout

extjs 视频总结

在引入包的时候.顺序必须是：ext-all.css

ext-base.js ext-all.js

执行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的方式

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:"你的笨蛋"});

-----一个登录小页面的完成

//这是一个小小的登录

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>

//这是一个小小的登录是上面登录简单的写法也是常用的写法

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>