- 浏览: 800464 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuhanwm910731:
我现在需要实现复选(非级联选择)的树形下拉菜单,麻烦发给我一份 ...
extjs3.X支持树型的下拉控件 -
shine1200:
“所以咱们现在设置的虚拟路径“/message/upload/ ...
weblogic虚拟路径的配置和使用(2) -
icefireforest:
Fangrn 写道jx_dream 写道楼主,我最近在做树形下 ...
extjs3.X支持树型的下拉控件 -
cloudfile:
谢谢分享!
c++库c#调用开发时需要注意的一点 -
xuweilinbegin:
我也要一份哦:xuweilin15353@163.com,谢谢 ...
extjs3.X支持树型的下拉控件
有些业务处理我们不能一步做完,所以我们希望实现一个类似于setup安装向导的控件,在ext官方的论坛上找到一个,但是只支持extjs2.×,下边的这个控件是在extjs3.×上做的
Ext.layout.UXCardLayout=Ext.extend(Ext.layout.CardLayout,{setActiveItem:function(item){ item=this.container.getComponent(item); if(this.activeItem!=item){ if(this.activeItem){ this.activeItem.hide(); } if(this.activeItem&&!this.activeItem.hidden){ return ; } this.activeItem=item; item.show(); this.layout(); } }}); Ext.UXWizHeader=Ext.extend(Ext.BoxComponent,{height:55,region:"north",title:"Wizard",steps:0,stepText:"Step {0} of {1}: {2}",autoEl:{tag:"div",cls:"ext-ux-wiz-Header",children:[{tag:"div",cls:"ext-ux-wiz-Header-title"},{tag:"div",children:[{tag:"div",cls:"ext-ux-wiz-Header-step"},{tag:"div",cls:"ext-ux-wiz-Header-stepIndicator-container"}]}]},titleEl:null,stepEl:null,imageContainer:null,indicators:null,stepTemplate:null,lastActiveStep:-1,updateStep:function(currentStep,title){ var html=this.stepTemplate.apply({0:currentStep+1,1:this.steps,2:title}); this.stepEl.update(html); if(this.lastActiveStep!=-1){ this.indicators[this.lastActiveStep].removeClass("ext-ux-wiz-Header-stepIndicator-active"); } this.indicators[currentStep].addClass("ext-ux-wiz-Header-stepIndicator-active"); this.lastActiveStep=currentStep; },onRender:function(ct,position){ Ext.UXWizHeader.superclass.onRender.call(this,ct,position); this.indicators=[]; this.stepTemplate=new Ext.Template(this.stepText),this.stepTemplate.compile(); var el=this.el.dom.firstChild; var ns=el.nextSibling; this.titleEl=new Ext.Element(el); this.stepEl=new Ext.Element(ns.firstChild); this.imageContainer=new Ext.Element(ns.lastChild); this.titleEl.update(this.title); var image=null; for(var i=0,len=this.steps;i<len;i++){ image=document.createElement("div"); image.innerHTML=" "; image.className="ext-ux-wiz-Header-stepIndicator"; this.indicators[i]=new Ext.Element(image); this.imageContainer.appendChild(image); } }}); Ext.UXWiz=Ext.extend(Ext.Window,{loadMaskConfig:{"default":"Saving..."},height:400,width:540,closable:true,resizable:false,modal:true,cards:null,previousButtonText:"< Previous",nextButtonText:"Next >",cancelButtonText:"Cancel",finishButtonText:"Finish",headerConfig:{},cardPanelConfig:{},previousButton:null,nextButton:null,cancelButton:null,cardPanel:null,currentCard:-1,headPanel:null,cardCount:0,initComponent:function(){ this.initButtons(); this.initPanels(); var title=this.title||this.headerConfig.title; title=title||""; Ext.apply(this,{title:title,layout:"border",cardCount:this.cards.length,buttons:[this.previousButton,this.nextButton,this.cancelButton],items:[this.headPanel,this.cardPanel]}); this.addEvents("cancel","finish"); Ext.UXWiz.superclass.initComponent.call(this); this.cardPanel.activeItem=0; },getWizardData:function(){ var formValues={}; var cards=this.cards; for(var i=0,len=cards.length;i<len;i++){ if(cards[i].form){ formValues[cards[i].id]=cards[i].form.getValues(false); }else { formValues[cards[i].id]={}; } } return formValues; },switchDialogState:function(enabled,type){ this.showLoadMask(!enabled,type); this.previousButton.setDisabled(!enabled); this.nextButton.setDisabled(!enabled); this.cancelButton.setDisabled(true); if(this.closable){ var ct=this.tools["close"]; switch(enabled){ case true: this.tools["close"].unmask(); break ; default: this.tools["close"].mask(); break ; } } },showLoadMask:function(show,type){ if(!type){ type="default"; } if(show){ if(this.loadMask==null){ this.loadMask=new Ext.LoadMask(this.body); } this.loadMask.msg=this.loadMaskConfig["type"]; this.loadMask.show(); }else { if(this.loadMask){ this.loadMask.hide(); } } },initPanelsEvents:function(){ var cards=this.cards; for(var i=0,len=cards.length;i<len;i++){ cards[i].on("show",this.onCardShow,this); cards[i].on("hide",this.onCardHide,this); cards[i].on("clientvalidation",this.onClientValidation,this); } },initPanels:function(){ var cards=this.cards; var cardPanelConfig=this.cardPanelConfig; Ext.apply(this.headerConfig,{steps:cards.length}); this.headPanel=new Ext.UXWizHeader(this.headerConfig); Ext.apply(cardPanelConfig,{layout:new Ext.layout.UXCardLayout(),items:cards}); this.initPanelsEvents(); Ext.applyIf(cardPanelConfig,{region:"center",border:false,activeItem:0}); this.cardPanel=new Ext.Panel(cardPanelConfig); },initButtons:function(){ this.previousButton=new Ext.Button({text:this.previousButtonText,disabled:true,minWidth:75,handler:this.onPreviousClick,scope:this}); this.nextButton=new Ext.Button({text:this.nextButtonText,minWidth:75,handler:this.onNextClick,scope:this}); this.cancelButton=new Ext.Button({text:this.cancelButtonText,handler:this.onCancelClick,scope:this,minWidth:75}); },onClientValidation:function(card,isValid){ if(!isValid){ this.nextButton.setDisabled(true); }else { this.nextButton.setDisabled(false); } },onCardHide:function(card){ if(this.cardPanel.layout.activeItem.id===card.id){ this.nextButton.setDisabled(true); } },onCardShow:function(card){ var parent=card.ownerCt; var items=parent.items; for(var i=0,len=items.length;i<len;i++){ if(items.get(i).id==card.id){ break ; } } this.currentCard=i; this.headPanel.updateStep(i,card.title); if(i==len-1){ this.nextButton.setText(this.finishButtonText); }else { this.nextButton.setText(this.nextButtonText); } if(card.isValid()){ this.nextButton.setDisabled(false); } if(i==0){ this.previousButton.setDisabled(true); }else { this.previousButton.setDisabled(false); } },onCancelClick:function(){ if(this.fireEvent("cancel",this)!==false){ this.close(); } },onFinish:function(){ if(this.fireEvent("finish",this,this.getWizardData())!==false){ this.close(); } },onPreviousClick:function(){ if(this.currentCard>0){ this.cardPanel.getLayout().setActiveItem(this.currentCard-1); } },onNextClick:function(){ if(this.currentCard==this.cardCount-1){ this.onFinish(); }else { this.cardPanel.getLayout().setActiveItem(this.currentCard+1); } }}); Ext.UXWizCard=Ext.extend(Ext.FormPanel,{header:false,hideMode:"display",initComponent:function(){ this.addEvents("beforecardhide"); Ext.UXWizCard.superclass.initComponent.call(this); },isValid:function(){ if(this.monitorValid){ return this.bindHandler(); } return true; },bindHandler:function(){ var valid=true; this.form.items.each(function(f){ if(f.isValid&&!f.isValid(true)){ valid=false; return false; } }); if(this.buttons){ for(var i=0,len=this.buttons.length;i<len;i++){ var btn=this.buttons[i]; if(btn.formBind===true&&btn.disabled===valid){ btn.setDisabled(!valid); } } } this.fireEvent("clientvalidation",this,valid); },initEvents:function(){ var old=this.monitorValid; this.monitorValid=false; Ext.UXWizCard.superclass.initEvents.call(this); this.monitorValid=old; this.on("beforehide",this.bubbleBeforeHideEvent,this); this.on("beforecardhide",this.isValid,this); this.on("show",this.onCardShow,this); this.on("hide",this.onCardHide,this); },bubbleBeforeHideEvent:function(){ var ly=this.ownerCt.layout; var activeItem=ly.activeItem; if(activeItem&&activeItem.id===this.id){ return this.fireEvent("beforecardhide",this); } return true; },onCardHide:function(){ if(this.monitorValid){ this.stopMonitoring(); } },onCardShow:function(){ if(this.monitorValid){ this.startMonitoring(); } }});
使用方法:
var wizard=new Ext.UXWiz({title:"\u5408\u5e76\u673a\u6784",headerConfig:{title:"\u673a\u6784\u5408\u5e76"},cardPanelConfig:{defaults:{baseCls:"x-small-editor",bodyStyle:"padding:40px 15px 5px 20px;background-color:#F6F6F6;",border:false}},cards:[new Ext.UXWizCard({title:"Welcome",items:[{border:false,bodyStyle:"background:none;",html:"\u673a\u6784\u5408\u5e76\uff0c\u9009\u62e9\u9700\u8981\u5408\u5e76\u7684\u673a\u6784\uff0c\u786e\u5b9a\u5408\u5e76\u540e\u7684\u76ee\u6807\u673a\u6784\uff0c\u4fdd\u5b58\u540e\u5408\u5e76\u524d\u7684\u673a\u6784\u5c06\u88ab\u5220\u9664\uff0c\u5176\u4eba\u5458\u4fe1\u606f\u5c06\u8f6c\u79fb\u5230\u65b0\u673a\u6784\u3002"}]}),new Ext.UXWizCard({title:"Your name",monitorValid:true,defaults:{labelStyle:"font-size:11px"},items:[{border:false,bodyStyle:"background:none;padding-bottom:30px;",html:"Please enter your first- and your lastname. Only letters, underscores and hyphens are allowed."},new Ext.form.TextField({name:"firstname",fieldLabel:"Firstname",allowBlank:false,validator:function(v){ var t=/^[a-zA-Z_\- ]+$/; return t.test(v); }}),new Ext.form.TextField({name:"lastname",fieldLabel:"Lastname",allowBlank:false,validator:function(v){ var t=/^[a-zA-Z_\- ]+$/; return t.test(v); }})]}),new Ext.UXWizCard({title:"Your email-address",monitorValid:true,defaults:{labelStyle:"font-size:11px"},items:[{border:false,bodyStyle:"background:none;padding-bottom:30px;",html:" Please enter your email-address."},new Ext.form.TextField({name:"email",fieldLabel:"Email-Address",allowBlank:false,vtype:"email"})]}),new Ext.UXWizCard({title:"Finished!",monitorValid:true,items:[{border:false,bodyStyle:"background:none;",html:"Thank you for testing this wizard. Your data has been collected "+"and can be accessed via a call to <pre><code>this.getWizardData</code></pre>"+"When you click on the \"finish\"-button, the \"finish\"-event will be fired.<br/>"+"If no attached listener for this event returns \"false\", this dialog will be "+"closed. <br />"}]})]}); wizard.on("finish",function(t,d){ alert(Ext.encode(d)); return false; },wizard); wizard.show();
测试效果图:
官方网站:
http://www.siteartwork.de/wizardcomponent
评论
1 楼
downing114
2011-04-17
我使用wizard.hide(); 然后再wizard.show();就不行了,js报错:
‘dom.style’为空或不是对象
ext-all-debug.js 第7000行
‘dom.style’为空或不是对象
ext-all-debug.js 第7000行
发表评论
-
extjs3.X支持树型的下拉控件
2010-09-26 08:58 2560exejs是一个非常方便我们扩展自己控件的js框架,我们能想到 ... -
Javascript: unterminated string literal解决方法
2010-07-28 14:03 1806先将\r\n替换为<br>,然后再将\r与\n替换 ... -
Extjs 简单扩展 Component 实现点击刷新的验证码
2010-07-24 12:03 1222Ext.Image=Ext.extend(Ext.Comp ... -
扩展 ExtJs的编辑器(HtmlEditor):插入图片
2010-05-07 11:18 3826Ext内置的编辑器功能相对还是很弱,例如插入 ... -
ExtJS3 下拉树TreeComboBox的修改
2009-12-23 09:48 2269拜读了[Ext 3.x + Ext 2.x] 下拉树 Ext ... -
Ext.form.ComboBox加载json时刻默认选中的解决
2009-12-23 09:47 1966重写combo的setValue Ext.override( ... -
Extjs-RowExpander 的异步调用
2009-12-23 09:26 2135RowExpander是Extjs中grid的一个插件,可以在 ... -
给TextField添加tip信息
2009-10-16 11:59 3648有些时候我们需要给文本框添加提示信息,但是默认的控件是不支持的 ... -
类似163邮件系统的附件上传控件
2009-10-16 10:23 3871为了能够在页面中做到动态的添加和删除附件信息,着实费了不少精力 ... -
支持显示树的下拉选择框
2009-10-16 10:14 1598extjs是一个非常不错的页面显示架构,在扩展页面组件方面也是 ... -
extjs 解决combox和datefield 下拉部份被其他层遮盖的问题
2009-04-21 20:17 2656在我们使用combox和datefield 的时候,常遇到弹出 ...
相关推荐
Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码Extjs与C#完美接合写法控件源代码
ExtJs图片按钮控件:设置文字、文字颜色、背景图片、是否可用
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
可以动态的新增和删除Ext控件,这里支持的上传控件的新增和删除。
适用于ext3.2、3.3,打开index.html即可见效果
extjs 微调控件,时间微调控件,微调,javascript 微调 v2.0以上都可以用!!!
使用Extjs4.1编写了只能选择年月的日期控件
网上找了一些,不是运行不了,就是代码繁多复杂。所以自己试着写了一个扩展的时间日期控件,可选时分秒,包含项目源代码,下载可直接运行·
extjs时间空间精确秒
ExtJs4.1带时间选择的日期控件,完美支持4.1
一个相当不错的extjs入门文档,整个ext的控件,上边很多实例。有助于新手学习。
Ext5.1或Ext6.0测试通过。 拷贝文件: 将DateTimeField.js 和 DateTimePicker.js放在ext/src/ux目录下 页面引用 requires : [ 'Ext.ux.DateTimeField' ] 使用方式: { fieldLabel:'开始时间', ...}
Extjs4.1可使用的日期时间选择控件,其中有一些不合理之处请各位多提宝贵意见。
extjs控件,是本科的毕业设计,最后获得优秀,老师评价非常好。主要有图表控件、一级、二级、三级联动下拉列表框控件
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
extjs 时间控件
下载后请将文件解压在ext-3.x.x/examples/目录下! 支持Extjs 3.0以上版本. 用过Extjs的人都晓得,Ext自身的DateField只支持日期选择,而TimeField却实现的又很简单。真的是苦了一帮子英雄好汉啊!此控件由本人原创,...
下载后请将文件解压在ext-3.x.x/examples/目录下! 支持 Extjs 3.0以上版本. 用过Extjs的人都晓得,Ext自身的DateField只支持日期选择,而TimeField却实现. ☆☆☆注意,开源啦,内附源码☆☆☆☆
一个extjs的分页控件,就是可以选择一页显示多少条记录,该控件非常灵活,便于集成
extjs 6 的日期时间控件,不能用我铲脸