1 function setStyle(){
2 Ext.fly('myBtn').on({'click':function(){
3 //Ext.fly('myDiv').setStyle('backgroundColor','#ff0000');
4 Ext.fly('myDiv').highlight();
5 }});
6 Ext.fly('myDiv').addClassOnOver('div_mouse_on');
7 }
8
9 function appendAsTag(){
10 var str='<ul><li>玉带桥边鸟鸟风，</li>';
11 str+='<li>牧童横笛边桥东</li>';
12 str+='<li>夕阳返照校花坞</li>';
13 str+='<li>柳絮飞来片片红</li>';
14 Ext.DomHelper.append('myDiv2',str);
15 }
16
17 function appendAsObj(){
18 var obj={
19 tag:'ul',
20 children:[
21 {tag:'li',html:'少年听雨歌楼上，红烛昏罗帐。'},
22 {tag:'li',html:'壮年听雨客舟中，江阔云低，断雁叫西风。'},
23 {tag:'li',html:'而今听雨僧庐下，鬓已星星也。'},
24 {tag:'li',html:'悲欢离合总无情，一任阶前点滴到天明。 '}
25 ]
26 };
27 Ext.DomHelper.append('myDiv2',obj);
28 }
29
30 function testInsert(){
31 var str='<ul><li>人生若只如初见</li>';
32 str+='<li>何事秋风悲画扇</li></ul>';
33 Ext.DomHelper.append('beforeBegin',Ext.getDom('myDiv'),str);
34 }
35
36 function testOverwrite(){
37 var str='<ul><li>人生若只如初见</li>';
38 str+='<li>何事秋风悲画扇</li></ul>';
39 Ext.DomHelper.overwrite('myDiv',str);
40 }
41
42 function testTemplate(){
43 var tpl=Ext.DomHelper.createTemplate('<li>{content}</li>');
44 tpl.overwrite('myDiv',{content:'劝君更尽一杯酒 西出阳关无故人'});
45 }
46
47
48 function testElementSelect(){
49 var win=Ext.Window({
50 id:'myWin',
51 title:'DomQuery',
52 width:300,
53 height:400,
54 renderTo:Ext.getBody(),
55 bbar:[
56 {
57 test:'元素选择器',
58 handler:function(){
59 var el=Ext.DomQuery.selectNode('*');
60 //var el=Ext.query('*');
61 alert(el.innerHTML);
62 }
63 }
64 ]
65 });
66 win.show();
67 }
68
69 function testSelect(){
70 var trs=Ext.query('tr:even');
71 Ext.each(trs,function(tr){
72 tr.style.backgroundColor='#ffff00';
73 });
74 }
75
76 function ns(pkg){
77 if(!pkg){
78 return null;
79 }
80 var o={};
81 var result=o;
82 var arr=pkg.split('.');
83 o=o[arr[0]]={};
84 var len=arr.length;
85 for(var i=1;i<len;i++){
86 o=o[arr[i]]={};
87 }
88 return result;
89 }
90
91
92 function Ajax_Func1() {
93 new Ext.Button({
94 renderTo: "div1",
95 text: "后台Ajax提交",
96 handler: function () {
97 Ext.Ajax.request({
98 url: 'Ajax_Func1.do',
99 headers: {
100 'userHeader': 'userMsg'
101 },
102 params: { a: 10, b: 20 },
103 method: 'GET',
104 success: function (response, options) {
105 Ext.MessageBox.alert('成功', '从服务端获取结果: ' + response.responseText);
106 },
107 failure: function (response, options) {
108 Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
109 }
110 });
111 },
112 id: "bt1"
113 });
114 }
115
116 function ajaxlogin() {
117 new Ext.Button({
118 renderTo: "div1",
119 text: "后台Ajax提交",
120 handler: function () {
121 Ext.Ajax.request({
122 url: 'login.do?method=query',
123 headers: {
124 'userHeader': 'userMsg'
125 },
126 params: { a: 10, b: 20 },
127 method: 'GET',
128 success: function (response, options) {
129 Ext.MessageBox.alert('成功', '从服务端获取结果: ' + response.responseText);
130 },
131 failure: function (response, options) {
132 Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
133 }
134 });
135 },
136 id: "bt1"
137 });
138 }
139
140 function requestJson(){
141 Ext.Ajax.request({
142 url:'test.json',
143 disableCaching:true,
144 success:function(response,opts){alert(response.responseText);},
145 failure:function(response,opts){alert('加载数据失败 ');}
146 });
147 }
148 function requestXml(){
149 Ext.Ajax.request({
150 url:'testdata.xml',
151 success:function(response,opts){
152 var reader =new Ext.data.XmlReader({
153 totalProperty:'results',
154 record:'row',
155 idProperty:'id',
156 messageProperty:'msg'
157 },Ext.data.Record.create([
158 {name:'name'},{name:'occupation'}
159 ]));
160 alert(Ext.encode(reader.read(response)));
161 },
162 failure:function(){
163 alert('加载数据失败 ');
164 }
165 });
166 }
167
168 function sendReq(){
169 var result;
170 var successHandler=function(response,opts){
171 result=response.responseText;
172 }
173 var failureHandler=function(response,opts){
174 alert('加载数据失败');
175 }
176 Ext.Ajax.request({
177 url:'http://www.google.com.hk',
178 success:successHandler,
179 failure:failureHandler
180 });
181
182 }
183
184
185 function loadImg(){
186 var img=document.createElement('img');
187 img.width=700,
188 img.height=700,
189 img.src='images/XX.jpg',
190 document.body.appendChild(img);
191 }
192
193 function loadJs(){
194 var headTag=document.getElementsByTagName('HEAD')[0];
195 var scriptTag=document.createElement('script');
196 scriptTag.type='text/javascript';
197 scriptTag.src='basejs/study/DynamicLoad.js',
198 headTag.appendChild(scriptTag);
199 }
200 function insertScript(source){
201 var headTag=document.getElementsByTagName('HEAD')[0];
202 var scriptTag=document.createElement('script');
203 scriptTag.type='text/javascript';
204 scriptTag.text=source,
205 headTag.appendChild(scriptTag);
206 }
207 function ajaxInsertScript(){
208 Ext.Ajax.request({
209 url:'basejs/study/DynamicLoad.js',
210 success:function(response,opts){
211 var result=response.responseText;
212 insertScript(result);
213 },
214 failure:function(){
215 alert('加载失败');
216 }
217 });
218 }
219
220 function extMsgts1(){
221 var fn=function(){
222 //alert('导致脚本挂起，后续代码无法运行');
223 Ext.Msg.alert('友情提示','Ext.Msg不会导致脚本挂起');
224 Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'执行到这里没有');
225 }
226 fn();
227 }
228 function extMsgts2(){
229 Ext.Msg.show({
230 title:'提示',
231 msg:'此操作无法回退，是否继续',
232 buttons:Ext.Msg.YESNO,
233 fn:function(btnId,text,opt){
234 if(btnId=='yes'){
235 Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'您选择的继续操作');
236 }else if(btnId='no'){
237 Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'取消操作');
238 }
239 },
240 icon:Ext.Msg.WARNING
241 });
242 }
243 function extMsgts3(){
244 Ext.Msg.show({
245 title:'提示',
246 msg:'您的姓名是',
247 buttons:Ext.Msg.OK,
248 prompt:true,
249 fn:function(btnId,text,opt){
250 Ext.DomHelper.insertHtml('beforeEnd',Ext.getBody().dom,'您的名字是'+text);
251 },
252 icon:Ext.Msg.QUESTION,
253 width:300
254 });
255 }
256
257 function extProgressBarts1(){
258 var pbar=new Ext.ProgressBar({
259 id:'pbar',
260 width:300,
261 renderTo:Ext.getBody()
262 });
263
264 pbar.wait({
265 interval:200,
266 increment:15,
267 duration:5000,
268 text:'加载中，请稍后...'
269 });
270 }
271 function extProgressBarts2(){
272 var pbar=new Ext.ProgressBar({
273 id:'pbar',
274 width:300,
275 renderTo:Ext.getBody()
276 });
277 var i=0;
278 var task={
279 run:function(){
280 i+=0.1;
281 pbar.updateProgress(i,'加载进度：'+Math.round(i*100)+'%');
282 if(Math.round(i*100)==100){
283 pbar.updateText('加载完成');
284 Ext.TaskMgr.stop(task);
285 }
286 },
287 interval:500
288 }
289 Ext.TaskMgr.start(task);
290 }
291
292 function extBarts1(){
293 var win=new Ext.Window( {
294 title:'测试工具条',
295 width:400,
296 height:300,
297 bbar:['->',{text:'被靠右了'}]
298 });
299 win.show();
300 }
301
302
303 function extPanelts1(){
304 var contentWin=null;
305 var panel=new Ext.Panel({
306 title:'基础Panel',
307 width:400,
308 height:300,
309 collapsible:true,
310 html:'问渠哪得清如许，为有源头活水来',
311 renderTo:Ext.getBody(),
312 bbar:[{
313 text:'诗歌内容',
314 handler:function(){
315 if(!contentWin){
316 contentWin=new Ext.Window({
317 //id:'poeamWin',
318 title:'诗歌内容',
319 width:400,
320 height:300,
321 closeAction:'hide',
322 maximizable:true,
323 minimizable:true,
324 constrain:true,
325 plain:true,
326 html:panel.body.dom.innerHTML
327 });
328 }
329
330 contentWin.show();
331 }
332 }]
333 });
334 }
335
336 function extTabPanel(){
337 var nodes={
338 text:'日月神教',
339 expanded:true,
340 leaf:false,
341 children:[
342 {id:'boss',text:'任我行',leaf:true},
343 {id:'gg',text:'令狐冲',leaf:true},
344 {id:'mm',text:'任盈盈',leaf:true}
345
346 ]
347 };
348
349
350 var rightTab=new Ext.TabPanel({
351 id:'rightTab',
352 region:'center'
353 });
354
355 var loadNodeInfo=function(node,e){
356 var id=node.attributes.id;
357 if(!id){
358 Ext.Msg.alert('提示信息','节点必须设置唯一的id');
359 return;
360 }
361 var comp=rightTab.getComponent(id);
362 if(!comp){
363 comp=new Ext.Panel({
364 id:id,
365 title:node.attributes.text||'',
366 html:node.attributes.text
367 });
368 rightTab.add(comp);
369 }
370 rightTab.setActiveTab(comp);
371 rightTab.setAutoScroll(comp);
372 }
373
374 var leftTree=new Ext.tree.TreePanel({
375 id:'leftTree',
376 title:'左侧树',
377 region:'west',
378 root:nodes,
379 width:200,
380 autoScroll:true,
381 split:true,
382 rootVisible:true,
383 collapsible:true,
384 listeners:{'click':loadNodeInfo}
385 });
386
387 var vp=new Ext.Viewport({
388 layout:'border',
389 items:[leftTree,rightTab]
390 });
391 }
392 function extTabPanel2(){
393 var nodes={
394 text:'日月神教',
395 expanded:true,
396 leaf:false
397 };
398
399
400 var rightTab=new Ext.TabPanel({
401 id:'rightTab',
402 region:'center'
403 });
404
405 var loadNodeInfo=function(node,e){
406 var id=node.attributes.id;
407 if(!id){
408 Ext.Msg.alert('提示信息','节点必须设置唯一的id');
409 return;
410 }
411 var comp=rightTab.getComponent(id);
412 if(!comp){
413 comp=new Ext.Panel({
414 id:id,
415 //autoLoad:{url:'login.jsp'},
416 title:node.attributes.text||'',
417 //html:'<iframe src="upload.jsp" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
418 html:'<iframe src="'+node.attributes.page+'" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
419 });
420 rightTab.add(comp);
421 }
422 rightTab.setActiveTab(comp);
423 rightTab.setAutoScroll(comp);
424 }
425
426 var leftTree=new Ext.tree.TreePanel({
427 id:'leftTree',
428 title:'左侧树',
429 region:'west',
430 root:{text:'日月神教',expanded:true,leaf:false},
431 dataUrl:'tree.jsp',
432 width:200,
433 autoScroll:true,
434 split:true,
435 rootVisible:true,
436 collapsible:true,
437 listeners:{'click':loadNodeInfo}
438 });
439
440 var vp=new Ext.Viewport({
441 layout:'border',
442 items:[leftTree,rightTab]
443 });
444 }
445
446 function extRecord(){
447 var store=new Ext.data.ArrayStore({
448 fields:[
449 {name:'userName'},
450 {name:'age'},
451 {name:'date'},
452 {name:'addr'}
453 ]
454 });
455
456 var grid=new Ext.grid.GridPanel({
457 viewConfig:{forceFit:true},
458 store:store,
459 columns:[
460 {header:'姓名',dataIndex:'userName'},
461 {header:'年龄',dataIndex:'age'},
462 {header:'出生日期',dataIndex:'date'},
463 {header:'地址',dataIndex:'addr'}
464 ]
465 });
466
467 var win=new Ext.Window({
468 title:'baseGrid',
469 width:600,
470 height:400,
471 layout:'fit',
472 items:grid,
473 buttons:[
474 {
475 text:'newRecord',
476 handler:function(){
477 var User=new Ext.data.Record.create([
478 {name:'userName'},
479 {name:'age'},
480 {name:'date'},
481 {name:'addr'}
482 ]);
483 var record=new User({
484 userName:'大漠穷秋',
485 age:'25',
486 date:'1985-10-10',
487 addr:'亚信联创'
488 });
489 store.add(record);
490 }
491 }
492 ]
493 });
494 win.show();
495 }
496
497 function extRecord2(){
498 var data=[
499 ['大漠穷秋1',25,'1986-04-02','我不告诉你'],
500 ['大漠穷秋2',25,'1985-04-02','我不告诉你'],
501 ['大漠穷秋3',25,'1984-04-02','我不告诉你'],
502 ['大漠穷秋4',25,'1983-04-02','我不告诉你'],
503 ['大漠穷秋5',25,'1982-04-02','我不告诉你']
504 ];
505
506 var store=new Ext.data.ArrayStore({
507 fields:[
508 {name:'userName'},
509 {name:'age'},
510 {name:'date'},
511 {name:'addr'}
512 ]
513 });
514
515 store.loadData(data);
516 var grid=new Ext.grid.GridPanel({
517 viewConfig:{forceFit:true},
518 store:store,
519 columns:[
520 {header:'姓名',dataIndex:'userName'},
521 {header:'年龄',dataIndex:'age'},
522 {header:'出生日期',dataIndex:'date'},
523 {header:'地址',dataIndex:'addr'}
524 ]
525 });
526
527 var win=new Ext.Window({
528 title:'CopyRecord',
529 width:400,
530 height:300,
531 layout:'fit',
532 items:grid,
533 buttons:[{
534 text:'CopyRecode',
535 handler:function(){
536 var record=grid.getSelectionModel().getSelected();
537 if(!record){
538 Ext.Msg.alert('友情提示','请选中需要copy的记录')
539 return;
540 }
541 var newRecord=record.copy();
542 //alert(Ext.encode(record));//Uncaught RangeError: Maximum call stack size exceeded
543 alert(Ext.encode(newRecord));
544 }
545 }]
546 });
547 win.show();
548 }
549
550
551 function extFormPanel(){
552 var data=[
553 ['大漠穷秋1',25,'1086-04-02','你猜1',false],
554 ['大漠穷秋2',25,'1085-04-02','你猜2',false],
555 ['大漠穷秋3',25,'1084-04-02','你猜3',true],
556 ['大漠穷秋4',25,'1083-04-02','你猜4',true],
557 ['大漠穷秋5',25,'1082-04-02','你猜5',false]
558 ];
559 var store=new Ext.data.ArrayStore({
560 fields:[
561 {name:'userName'},
562 {name:'age'},
563 {name:'date'},
564 {name:'addr'},
565 {name:'marrage',type:'boolean'}
566 ]
567 });
568 store.loadData(data);
569 var grid=new Ext.grid.GridPanel({
570 viewConfig:{
571 forceFit:true
572 },
573 border:false,
574 store:store,
575 sm:new Ext.grid.RowSelectionModel({
576 singleSelect:true,
577 listeners:{
578 rowselect:function(sm,row,rec){
579 Ext.getCmp('fm').getForm().loadRecord(rec);
580 }
581 }
582 }),
583 columns:[
584 {header:'姓名',dataIndex:'userName'},
585 {header:'年龄',dataIndex:'age'},
586 {header:'出生日期',dataIndex:'date'},
587 {header:'地址',dataIndex:'addr'},
588 {header:'婚否',dataIndex:'marrage',
589 renderer:function rating(v){
590 if(v){
591 return '<span style="color:red;">是</span>';
592 }
593 return '<span style="color:green;">否</span>';
594 }
595 }
596 ]
597 });
598
599 var form=new Ext.FormPanel({
600 id:'fm',
601 border:false,
602 bodyStyle:{'padding':'30 10'},
603 defaults:{width:120},
604 labelWidth:80,
605 items:[
606 {fieldLabel:'姓名',
607 name:'userName',
608 hiddenName:'userName',
609 xtype:'textfield'
610 },{
611 fieldLabel:'年龄',
612 name:'age',
613 hiddenName:'age',
614 xtype:'textfield'
615 },{
616 fieldLabel:'出生日期',
617 name:'date',
618 hiddenName:'date',
619 xtype:'textfield'
620 },{
621 fieldLabel:'地址',
622 name:'addr',
623 hiddenName:'addr',
624 xtype:'textfield'
625 },{
626 xtype:'radiogroup',
627 columns:'auto',
628 fieldLabel:'婚否',
629 name:'marrage',
630 hiddenName:'marrage',
631 items:[
632 {
633 inputValue:'true',
634 boxLabel:'是'
635 },{
636 inputValue:'false',
637 boxLabel:'否'
638 }
639 ]
640 }
641
642 ]
643 });
644
645 var win=new Ext.Window({
646 title:'RecordAndForm',
647 width:600,
648 height:400,
649 layout:'column',
650 layoutConfig:{
651 padding:'5',align:'middle'
652 },
653 items:[
654 {
655 columnWidth:0.60,
656 height:400,
657 layout:'fit',
658 items:[grid]
659 },{
660 columnWidth:0.40,
661 height:400,
662 layout:'fit',
663 items:[form]
664 }
665 ]
666 });
667 win.show();
668 }
669
670
671 function extStoreFilter(){
672 var data=[
673 ['大漠穷秋',25,'1985-04-02','我不告诉你'],
674 ['漠漠',26,'1984-04-02','我不告诉你'],
675 ['月光漠利亚',27,'1983-04-02','我不告诉你'],
676 ['桃花岛|漠漠',28,'1982-04-02','我不告诉你']
677 ];
678 var store=new Ext.data.ArrayStore({
679 fields:[
680 {name:'name'},
681 {name:'age'},
682 {name:'date'},
683 {name:'addr'}
684 ]
685 });
686 store.loadData(data);
687 var grid=new Ext.grid.GridPanel({
688 viewConfig:{forceFit:true},
689 store:store,
690 columns:[
691 {header:'姓名',dataIndex:'name'},
692 {header:'年龄',dataIndex:'age'},
693 {header:'出生日期',dataIndex:'date'},
694 {header:'地址',dataIndex:'addr'}
695 ]
696 });
697
698 var singleFn=function(){
699 var val=Ext.getCmp('name').getValue();
700 if(!val){
701 store.clearFilter();return;
702 }
703 store.filter('name',val,true,true);
704 }
705 var multiFn=function(){
706 var name=Ext.getCmp('name').getValue();
707 var age=Ext.getCmp('age').getValue();
708 store.filter([
709 {property:'name',value:name,anyMatch:true,caseSensitive:true},
710 {property:'age',value:age}
711 ]);
712 }
713 var win=new Ext.Window({
714
715 title:'过虑记录',
716 width:600,
717 height:400,
718 layout:'fit',
719 items:grid,
720 buttons:[
721 {xtype:'label',text:'姓名'},
722 {xtype:'textfield',id:'name',width:80},
723 {xtype:'label',text:'年龄'},
724 {xtype:'textfield',id:'age',width:80},
725 {handler:singleFn,text:'按姓名过滤'},
726 {handler:multiFn,text:'联合过滤'},
727 {handler:function(){store.clearFilter();},text:'重置'}
728 ]
729 });
730
731 win.show();
732 }
733
734
735 function extTreets(){
736 var tree={
737 id:'001',
738 text:'根',
739 children:[
740 {id:'002',text:'c1'},
741 {id:'003',text:'c2'},
742 {id:'004',text:'c3',
743 children:[{id:'005',text:'s1'},{id:'006',text:'s2'}]
744 }
745 ]
746 };
747
748 function println(msg){
749 var p=document.createElement('p');
750 p.innerHTML=msg;
751 document.body.appendChild(p);
752 }
753
754 function visit(node){
755 println(node.id+"-->"+node.text);
756 if(node.children&&node.children.length){
757 for(var i=0;i<node.children.length;i++){
758 visit(node.children[i]);
759 }
760 }
761 }
762
763 visit(tree);
764 }
765
766 function extTreets2(){
767 var tree={
768 id:'001',
769 text:'根',
770 children:[
771 {id:'002',text:'子1'},
772 {id:'003',text:'子2'},
773 {id:'004',text:'子3',
774 children:[{id:'005',text:'孙1'},{id:'006',text:'孙2'}]
775 }
776 ]
777 };
778
779 function println(msg){
780 var p=document.createElement('p');
781 p.innerHTML=msg;
782 document.body.appendChild(p);
783 }
784
785 function doFind(node,name,value,result){
786 if(node[name]==value){
787 result.push(node);
788 return;
789 }if(node.children&&node.children.length){
790 for(var i=0;i<node.children.length;i++){
791 doFind(node.children[i],name,value,result);
792 }
793 }
794 }
795 function find(name,value){
796 var result=[];
797 doFind(tree,name,value,result);
798 return result[0];
799 }
800 var node=find('text','孙1');
801 println(node.text);
802 }
803 function extTreets3(){
804 var nodes=[
805 {text:'任我行',leaf:true},
806 {text:'令狐冲',leaf:true},
807 {text:'任盈盈',leaf:true}
808 ];
809 var treePanel=new Ext.tree.TreePanel({
810 border:false,
811 autoScroll:true,
812 root:{text:'日月神教',leaf:false,expanded:true,children:nodes},
813 rootVisible:true
814 });
815 var win=new Ext.Window({
816 title:'树',
817 width:200,
818 height:400,
819 layout:'fit',
820 items:[treePanel],
821 buttons:[
822 {
823 text:'增加',
824 handler:function(){
825 var newNode=new Ext.tree.TreeNode({
826 text:'新节点'+(treePanel.root.childNodes.length+1),
827 leaf:true
828 });
829 treePanel.root.appendChild(newNode);
830 }
831 },{
832 text:'移动',
833 handler:function(){
834 var ryy=treePanel.root.childNodes[2];
835 treePanel.root.appendChild(ryy);
836 }
837 }
838 ]
839 });
840 win.show();
841 }
842
843
844 function uploadts2(){
845 var formPanel = new Ext.form.FormPanel({
846 renderTo:Ext.getBody(),
847 labelAlign : 'right',
848 labelWidth : 60,
849 frame : true,
850 border : false,
851 fileUpload : true,
852 width:300,
853 height:100,
854 items : [{
855 xtype : 'textfield',
856 inputType : 'file',
857 name:'file'
858 }],
859 buttons : [{
860 text : '上传',
861 iconCls : 'icon_uploading',
862 handler : function() {
863 if (!formPanel.getForm().isValid()) {
864 Ext.MessageBox.alert("信息", "表单输入验证失败，请正确填写完整！");
865 return;
866 }
867
868 formPanel.form.submit({
869 waitMsg : 'Uploading ....',
870 url : 'struts_fileupload.do',
871 method : "POST",
872 success : function(form, action) {
873 Ext.Msg.alert('success');
874 },
875 failure : function(form, action) {
876 Ext.Msg.alert('error');
877 }
878 });
879
880 }
881 }]
882 });
883
884 var win=new Ext.Window({
885 width:300,
886 height:100,
887 layout:'fit',
888 items:[formPanel]
889
890 });
891 win.show();
892 }
893
894
895
896
897
898
899
900
901
902
903 //************************************
浙公网安备 33010602011771号