ExtJS样例总结-1
1、组合框
1. new Ext.onReady(function(){
2. var top = new Ext.FormPanel({
3. labelAlign: 'top',
4. frame:true,
5. title: 'Multi Column, Nested Layouts and Anchoring',
6. bodyStyle:'padding:5px 5px 0',
7. width: 600,
8. items: [{
9. layout:'column',
10. items:[{
11. columnWidth:.5,
12. layout: 'form',
13. items: [{
14. xtype:'textfield',
15. fieldLabel: 'First Name',
16. name: 'first',
17. anchor:'95%'
18. }, {
19. xtype:'textfield',
20. fieldLabel: 'Company',
21. name: 'company',
22. anchor:'95%'
23. }]
24. },{
25. columnWidth:.5,
26. layout: 'form',
27. items: [{
28. xtype:'textfield',
29. fieldLabel: 'Last Name',
30. name: 'last',
31. anchor:'95%'
32. },{
33. xtype:'textfield',
34. fieldLabel: 'Email',
35. name: 'email',
36. vtype:'email',
37. anchor:'95%'
38. }]
39. }]
40. },{
41. xtype:'htmleditor',
42. id:'bio',
43. fieldLabel:'Biography',
44. height:200,
45. anchor:'98%'
46. }],
47.
48. buttons: [{
49. text: 'Save'
50. },{
51. text: 'Cancel'
52. }]
53. });
54.
55. top.render(document.body);
56. }) ;
2、页面布局：layout，参考：http://www.2cto.com/kf/201205/129829.html
absolute
顾名思义，在容器内部，根据指定的坐标定位显示
• accordion
这个是最容易记的，手风琴效果
• anchor
这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
• border
将容器分为五个区域:east,south,west,north,center
• card
像安装向导一样，一张一张显示
• column
把整个容器看成一列一列的,然后向容器放入子元素时;
• fit
一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
• form
是一种专门用于管理表单中输入字段的布局
• table
按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
3、翻页效果
1. Ext.onReady(function() {
2. var i = 0;
3. var navHandler = function(direction) {
4. if (direction == -1) {
5. i--;
6. if (i < 0) { i = 0; }
7. }
8. if (direction == 1) {
9. i++;
10. if (i > 2) { i = 2; return false; }
11. }
12. var btnNext = Ext.get("move-next");
13. var btnBack = Ext.get("move-next");
14. if (i == 0) {
15. btnBack.disabled = true;
16. } else {
17. btnBack.disabled = false;
18. }
19. if (i == 2) {
20. btnNext.value = "完成";
21. btnNext.disabled = true;
22. } else {
23. btnNext.value = "下一步";
24. btnNext.disabled = false;
25. }
26. card.getLayout().setActiveItem(i);
27. };
28. var card = new Ext.Panel({
29. width: 200,
30. height: 200,
31. title: '注册向导',
32. layout: 'card',
33. activeItem: 0, // make sure the active item is set on the container config!
34. bodyStyle: 'padding:15px',
35. defaults: {
36. border: false
37. },
38. bbar: [
39. {
40. id: 'move-prev',
41. text: '上一步',
42. handler: navHandler.createDelegate(this, [-1])
43. },
44. '->',
45. {
46. id: 'move-next',
47. text: '下一步',
48. handler: navHandler.createDelegate(this, [1])
49. }
50. ],
51.
52. items: [{
53. id: 'card-0',
54. html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
55. }, {
56. id: 'card-1',
57. html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
58. }, {
59. id: 'card-2',
60. html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
61. }],
62. renderTo: "container"
63. });
64. });
4、render、renderTo、applayTo、el、show说明
1.调用组件的render方法
panel.render('div');
2.在配置中指定 renderTo 属性
renderTo:'div',
3.配置中指定 applyTo ，这将把元素呈现到该属性的父元素上
applyTo:'divChild',
4.通过指定 el 属性，指定后调用 render 方法
el:'div'
panel.render();
5.通过调用 show 方法
panel.show(); //一般用在显示已经被 hide 的元素上
总结：el与renderTo相似，都是渲染到某个HTML元素。
5、FormPanel使用
1. var simple = new Ext.FormPanel({
2. labelWidth : 75, // label settings here cascade unless overridden
3. url : 'save-form.php',
4. frame : true,
5. title : 'Simple Form',
6. bodyStyle : 'padding:5px 5px 0',
7. width : 350,
8. defaults : {
9. width : 230
10. },
11. defaultType : 'textfield',
12.
13. items : [ {
14. fieldLabel : 'First Name',
15. name : 'first',
16. allowBlank : false
17. }, {
18. fieldLabel : 'Last Name',
19. name : 'last'
20. }, {
21. fieldLabel : 'Company',
22. name : 'company'
23. }, {
24. fieldLabel : 'Email',
25. name : 'email',
26. vtype : 'email'
27. }, new Ext.form.TimeField({
28. fieldLabel : 'Time',
29. name : 'time',
30. minValue : '8:00am',
31. maxValue : '6:00pm'
32. }) ],
33.
34. buttons : [ {
35. text : 'Save'
36. }, {
37. text : 'Cancel'
38. } ]
39. });
40. simple.render(document.body);
6、viewport和border布局
1. new Ext.Viewport({
2. layout: 'border',
3. items: [{
4. region: 'north',
5. html: '<h1 class="x-panel-header">Page Title</h1>',
6. autoHeight: true,
7. border: false,
8. margins: '0 0 5 0'
9. }, {
10. region: 'west',
11. collapsible: true,
12. title: 'Navigation',
13. width: 200
14. // the west region might typically utilize a TreePanel or a Panel with Accordion layout
15. }, {
16. region: 'south',
17. title: 'Title for Panel',
18. collapsible: true,
19. html: 'Information goes here',
20. split: true,
21. height: 100,
22. minHeight: 100
23. }, {
24. region: 'east',
25. title: 'Title for the Grid Panel',
26. collapsible: true,
27. split: true,
28. width: 200,
29. xtype: 'grid',
30. // remaining grid configuration not shown ...
31. // notice that the GridPanel is added directly as the region
32. // it is not "overnested" inside another Panel
33. }, {
34. region: 'center',
35. xtype: 'tabpanel', // TabPanel itself has no title
36. items: {
37. title: 'Default Tab',
38. html: 'The first tab/'s content. Others may be added dynamically'
39. }
40. }]
41. });
6、store、model
1. Ext.onReady(function() {
2. var myStore = new Ext.data.ArrayStore({
3. fields: ['id','fullname', 'first'],
4. idIndex: 0 // id for each record will be the first element
5. });
6. var myData = [
7. [1, 'Fred Flintstone', 'Fred'], // note that id for the
8. // record is the first
9. // element
10. [2, 'Barney Rubble', 'Barney']
11. ];
12.
13.
14. myStore.loadData(myData);
15.
16. myStore.each(function(model) {
17. alert(model.get('fullname'));
18. });
19. });
7、让面板整体色调保持一致
frame:true,
True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）。
8、combo使用
1. new Ext.onReady(function() {
2. var mystore = new Ext.data.ArrayStore({
3. fields : [ 'myId', 'displayText' ],
4. data : [ [ 1, 'ALL' ], [ 2, 'IP' ], [ 3, 'COOKIE' ] ]
5. });
6. var top = new Ext.FormPanel({
7. width : 600,
8. height : 400,
9. title : 'hello',
10. labelWidth: 50,
11. labelAlign:'right',
12. bodyStyle : 'padding:5px 5px 10 10',
13. frame : true,
14. defaults : {
15. xtype : 'combo',
16. width : 120,
17. height : 20,
18. typeAhead: true,
19. triggerAction: 'all',
20. lazyRender:true,
21. mode: 'local',
22. valueField: 'myId',
23. displayField: 'displayText'
24. },
25. items : [ {
26. fieldLabel : 'lable1',
27. store : mystore
28. }
29. , {
30. fieldLabel : 'lable2',
31. store : mystore
32. }, {
33. fieldLabel : 'lable3',
34. store : mystore
35. }, {
36. fieldLabel : 'lable4',
37. store : mystore
38. }, {
39. fieldLabel : 'lable5',
40. store : mystore
41. }, {
42. fieldLabel : 'lable6',
43. store : mystore
44. }, {
45. fieldLabel : 'lable7',
46. store : mystore
47. }, {
48. fieldLabel : 'lable8',
49. store : mystore
50. } ],
51. buttons : [ {
52. text : 'save'
53. }, {
54. text : 'cancel'
55. } ]
56. });
57.
58. top.render(document.body);
59. });
9、调整label标签与combo之间的距离
labelWidth: 50,
labelAlign:'right'
10、调试
chrome：scripts->选择需要调试的js文件，打断点进行调试
ctrl+shift+i后：network->documents中可查看request传递的参数
11、Ajax实现联动菜单
1. (function(){
2. function createChild(value,name){
3. var el = document.createElement("option");
4. el.setAttribute("value",value);
5. el.appendChild(document.createTextNode(name));
6. return el;
7. }
8. var data = {};
9.
10. Ext.onReady(function(){
11. //1.得到city这个dom对象
12. var cityObj = Ext.get("city");
13. //2.我们为这个city对象注册一个change
14. cityObj.on("change",function(e,select){
15. //3.得到改变后的数值
16. var ids = select.options[select.selectedIndex].value;
17. //3.1 他先去前台的缓存变量中差数据,当没有的时候在去后台拿
18. if(data["city"]){
19. //直接操作
20. }else{
21. //做ajax
22. }
23. //4.ajax请求把后台数据拿过来
24. Ext.Ajax.request({
25. url:'/extjs/extjs!menu.action',
26. params:{ids:ids},
27. method:'post',
28. timeout:4000,
29. success:function(response,opts){
30. var obj = eval(response.responseText);
31. //5.得到地区的哪个对象area DOM
32. var oldObj = Ext.get("area").dom;
33. //6.清除里面项
34. while(oldObj.length>0){
35. oldObj.options.remove(oldObj.length-1);
36. }
37. //7.加入新的项
38. Ext.Array.each(obj,function(o){
39. Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name));
40. })
41. //8.把从数据库拿到的数据进行前台页面缓存
42. }
43. });
44. });
45. });
46. })()
摘自 技术改变生活商业成就梦想
