ExtJS样例总结-2
1、卡片式布局
1. Ext.onReady(function() {
2. var panel = new Ext.Panel({
3. title : 'CardLayout',
4. width : 400,
5. height : 400,
6. frame : true,
7. applyTo : 'container',
8. autoScroll : true,
9. collapsible : true,
10. defaults : {
11. bodyStyle : 'background-color:#FFFFFF;padding:15px'
12. },
13. layout : 'card',
14. activeItem : 0,
15. items : [ {
16. title : 'one',
17. html : '123',
18. id : 'p1'
19. }, {
20. title : 'Two',
21. html : '234',
22. id : 'p2'
23. }, {
24. title : 'Three',
25. html : '255',
26. id : 'p3'
27. } ],
28. buttons : [ {
29. text : '上一页',
30. handler : ChangePage
31. }, {
32. text : '下一页',
33. handler : ChangePage
34. } ]
35. })
36. function ChangePage(btn) {
37. var index = Number(panel.layout.activeItem.id.substring(1));
38. if (btn.text == '上一页') {
39. index--;
40. if (index < 1)
41. index = 1;
42. } else {
43. index++;
44. if (index > 3)
45. index = 3;
46. }
47. panel.layout.setActiveItem('p' + index);
48. }
49. })
2、点击即选中
1. var panel = new Ext.Panel({
2. width : 400,
3. height : 100,
4. frame:true,
5. defaults : {
6. xtype : 'textfield',
7. width : 140,
8. selectOnFocus : true,
9. },
10. layout : 'form',
11. items : [ {
12. fieldLabel : '开始时间',
13. name : 'startTime',
14. value : new Date().dateFormat('Y-m-d H:i:s')
15. }, {
16. fieldLabel : '结束时间',
17. name : 'endTime',
18. value : new Date().dateFormat('Y-m-d H:i:s')
19. }, {
20. fieldLabel : 'IP',
21. name : 'searchIp'
22. } ]
23. });
3、获取textfield的内容：Ext.getCmp("name1").getValue();
id : 'name1'，增加事件处理
1. handler : function() {
2. var content = Ext.getCmp("name1").getValue(); //取值
3. if (content == "") {
4. alert("内容不能为空！");
5. // return false;
6. }
7. Ext.getCmp("name2").setValue(content); //设值
8. }
(1) fs.form.findField(id/name).setValue(value);
(2) Ext.get(id/name).setValue(value);
(3) Ext.getCmp(id).setValue(value);
获取form里面的field的三种方法
1)Ext.getCmp('id');
2)FormPanel.getForm().findField('id/name');
3)Ext.get('id/name');//前提是FormPanel在界面上显示出来了
4、时间监听器
1. Children = Ext.extend(Ext.util.Observable, {
2. constructor: function(){
3. this.state = "hungry";//或full
4. this.setMilk = function(milk) {
5. this.fireEvent('hungry',milk);//调用
6. },
7. this.addEvents({'hungry':true}),//申明
8. this.addListener('hungry',function(milk){
9. if(this.state == 'hungry'){
10. this.drink(milk);
11. }else{
12. alert("i am not hungry!");
13. }
14. }),//注册
15. this.drink = function(milk) {
16. alert("drink one bottle of milk: " + milk);
17. };
18.
19. }
20. });
21. var children = new Children();
22. children.setMilk('san lu milk!');
5、panel中button的放置位置
buttonAlign : 'center',
6、为按钮增加事件
1. var btn = new Ext.Button({text:'点击'});
2. var i = 0;
3. btn.on("click", function() {
4. var win = new Ext.Window({title:'title'+ i++,width:200, height:100});
5. win.show();
6. });
7、为html页面中的text文本赋值
1. Ext.get('b1').on("click",function() {
2. Ext.Ajax.request({
3. url : 'hello.jsp',
4. method : 'post',
5. params : {
6. id : '01'
7. },
8. timeout : 3000,
9. success : function(response, opts) {
10. var time = response.responseText;
11. Ext.getDom('hello2').value = time;
12. },
13. failure : function(response, opts) {
14. alert(response.responseText);
15. }
16. });
17. });
8、类的定义
Extjs 3 中是这样定义类的：
Js代码
1. MyApp.LoginWindow = Ext.extend(Ext.Window, {
2. title: 'Log in',
3. initComponent: function() {
4. Ext.apply(this, {
5. items: [
6. {
7. xtype: 'textfield',
8. name : 'username',
9. fieldLabel: 'Username'
10. },
11. ...
12. ]
13. });
14.
15. MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
16. }
17. });
Extjs4 中改成：
Js代码
1. Ext.define('MyApp.LoginWindow', {
2. extend: 'Ext.Window',
3.
4. title: 'Log in',
5.
6. initComponent: function() {
7. Ext.apply(this, {
8. items: [
9. //as above
10. ]
11. });
12.
13. MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
14. }
15. });
16.
这样做有两个好处：
• 不会出现忘记定出 MyApp namespace 的情况
• 如果 Ext.Window 的定义位置比 MyApp.LoginWindow 晚，使用 4 的方式可以延时定义 LoginWindow 知道找到了 Ext.Window 的定义
9、创建对象
extjs 3.x: new MyApp.LoginWindow();
extjs 4.x: Ext.create("MyApp.LoginWindow",{...})
10、定义和使用命名空间
定义：Ext.namespace('Ext.exampledata');
1. Ext.namespace('Ext.exampledata');
2.
3. Ext.exampledata.states = [
4. ['AL', 'Alabama', 'The Heart of Dixie'],
5. ['AK', 'Alaska', 'The Land of the Midnight Sun'],
6. ['AZ', 'Arizona', 'The Grand Canyon State'],
7. ['AR', 'Arkansas', 'The Natural State']
8. ];
使用命名空间下定义的类
1. var store = new Ext.data.ArrayStore({
2. fields: ['abbr', 'state', 'nick'],
3. data : Ext.exampledata.states
4. });
使用combobox获取内容：
1. var combo = new Ext.form.ComboBox({
2. store: store,
3. displayField:'state',
4. typeAhead: true,
5. mode: 'local',
6. forceSelection: true,
7. triggerAction: 'all',
8. emptyText:'Select a state...',
9. selectOnFocus:true,
10. });
【注意】获取内容：store,获取其中某个字段：displayField
11、ext3中的store用法
1. var store2 = new Ext.data.ArrayStore({
2. fields : ['id', 'text'],
3. data : [['1', '一月'], ['2', '二月'], ['3', '三月'], ['4', '四月'],
4. ['5', '五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'],
5. ['9', '九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月']]
6. });
7.
8. var combo2 = new Ext.form.ComboBox({
9. store: store2,
10. displayField:'text',
11. typeAhead: true,
12. mode: 'local',
13. forceSelection: true,
14. triggerAction: 'all',
15. emptyText:'Select a state...',
16. selectOnFocus:true,
17. });
12、combo中的自动补全
typeAhead : true,
默认值： value : 1,其中value值为valueField的值，而不是displayField
13、查看回调函数中传递的参数
console.dir(arguments);
14、回调函数
1. listeners : {
2. render : rend
3. }
步骤1：添加listeners
步骤2：在相应类中查找回调event，例如：render
步骤3：写自己的处理函数，即回调中要完成的事情，例如rend方法
1. function rend(btn) {
2. Ext.Msg.alert(btn.title, btn.title + " is rendered!");
3. }
完整例子如下：
1. Ext.onReady(function() {
2. function rend(btn) {
3. Ext.Msg.alert(btn.title, btn.title + " is rendered!");
4. }
5. var tabs = new Ext.TabPanel({
6. renderTo : 'my-tabs',
7. activeTab : 1,
8. items : [ {
9. xtype : 'panel',
10. title : 'Tab 1',
11. html : 'tab1 content..........',
12. listeners : {
13. render : rend
14. }
15. }, {
16. xtype : 'panel',
17. title : 'Tab 2',
18. html : 'tab2 content...&&&&&&&.......',
19. listeners : {
20. render : rend
21. }
22. }, {
23. xtype : 'panel',
24. title : 'Tab 3',
25. autoLoad : "news.html",
26. listeners : {
27. render : rend
28. }
29. } ]
30. });
31. new Ext.Viewport({
32. layout : 'fit',
33. items : tabs
34. });
35. });
15、handler
1. xtype : 'button',
2. text : 'add tab',
3. handler : function() {
4. tabs.add({
5. title : 'new table'
6. });
7. }
16、grid panel
1. Ext.onReady(function() {
2. var data = [ [ 1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com' ],
3. [ 2, 'jfox', 'huihoo', 'www.huihoo.org' ],
4. [ 3, 'jdon', 'jdon', 'www.jdon.com' ],
5. [ 4, 'springside', 'springside', 'www.springside.org.cn' ] ];
6. var store = new Ext.data.SimpleStore({
7. data : data,
8. fields : [ "id", "name", "organization", "homepage" ]
9. });
10. var grid = new Ext.grid.GridPanel({
11. renderTo : "hello",
12. title : "中国Java 开源产品及团队",
13. height : 150,
14. width : 600,
15. columns : [ {
16. header : "项目名称",
17. dataIndex : "name"
18. }, {
19. header : "开发团队",
20. dataIndex : "organization"
21. }, {
22. header : "网址",
23. dataIndex : "homepage"
24. } ],
25. store : store,
26. autoExpandColumn : 2
27. });
28. });
17、表单的提交 www.2cto.com
1. function simpleForm() {
2. var panel = new Ext.form.FormPanel({
3. title : 'user basic info',
4. width : 400,
5. height : 200,
6. frame : true,
7. labelAlign : 'left',
8. labelWidth : 80,
9. items : [ {
10. xtype : 'textfield',
11. fieldLabel : 'username',
12. name : 'username',
13. id : 'user',
14. value : 'abc'
15. }, {
16. xtype : 'textfield',
17. fieldLabel : 'password',
18. inputType : 'password',
19. name : 'password',
20. value : 'hello1234'
21. }, {
22. xtype : 'datefield',
23. fieldLabel : 'birthday',
24. name : 'birthday',
25. value : new Date().format('Y-m-d')
26. }, {
27. xtype : 'textfield',
28. fieldLabel : 'email',
29. name : 'email',
30. value : 'abc@sina.com'
31. }, {
32. xtype : 'textarea',
33. fieldLabel : 'description',
34. name : 'description',
35. value : 'hello world'
36. } ],
37. buttons : [ {
38. text : 'save',
39. handler : function() {
40. panel.getForm().submit({
41. url : 'UserServlet',
42. params : {
43. k1 : 'v1'
44. },
45. success : function(form, action) {
46. Ext.Msg.alert('Success', "it is ok now");
47. },
48. });
49. }
50. }, {
51. text : 'cancel',
52. handler : function() {
53. panel.hide();
54. }
55. }, {
56. text : 'reset',
57. handler : function() {
58. //findField必须去id的，而不是name
59. alert(panel.getForm().findField("user").getValue());
60. panel.getForm().reset();
61. }
62. }, {
63. text : 'load',
64. handler : function() {
65. panel.getForm().load({
66. url : 'LoadDataServlet',
67. params : {
68. k1 : 'v1'
69. }
70. //待完善
71. });
72. }
73. } ]
74. });
75. panel.render(document.body);
76. }
77.
78. Ext.onReady(simpleForm);
18、直接渲染到dom节点（document.body），而未定义p
1. var panel = new Ext.Panel({
2. width : 400,
3. height : 300,
4. title : 'my title'
5. });
6. panel.render(document.body);
19、面板的五大部分
1. var panel = new Ext.Panel({
2. width : 400,
3. height : 300,
4. title : 'my title',
5. tbar:[{text:'save'},'-',{text:'edit'}],
6. bbar:[{text:'next page'},'->',{text:'up page'}],
7. buttonAlign:'center',
8. buttons:[{text:'确定'},{text:'取消'}],
9. html : '<h1>这是面板的body部分</h1>'
10. });
11. panel.render(document.body);
20、为验证添加自定义提示
步骤1：必须先添加上如下内容，功能在于：初始化tips和让提示出现在右侧，默认会跟着鼠标一起动
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
步骤2：
1. allowBlank : false,
2. blankText:'姓名不能为空'
21、ip地址验证
1. allowBlank : false,
2. blankText:"IP不能为空",
3. regex: /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)((d|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/
22、Object和String转换
将Object转换为JSON（即String）:Ext.util.JSON.encode( Mixed o)
将JSON转换为Object（即对象）:Ext.util.JSON.decode(String json)
将record转换为对象： record.data
1. var blackListRecords = [];
2. Ext.each(selectedRecords, function(record) {
3. //versions.push(record.get('version'));
4. //appId = record.get('appId');
5. blackListRecords.push(Ext.util.JSON.encode(record.data));
6. })
7. Ext.Ajax.request({
8. url : '../../blackList/deleteBlackLists.do',
9. params : {
10. records : blackListRecords
11. },
12. success : function() {
13. Ext.MessageBox.alert('成功', '删除成功!');
14. }
15. });
摘自 技术改变生活商业成就梦想
上一篇： Sublime功能拓展及插件介绍
下一篇： js 返回上一页和刷新
推荐阅读