Ext.layout.SlideLayout.js Ext.namespace("Ext.layout"); Ext.layout.SlideLayout = Ext.extend(Ext.layout.FitLayout, { deferredRender : false, renderHidden : false, easing: "none", duration: .5, opacity: 1, setActiveItem : function(itemInt) { if (typeof(itemInt) == "string") { itemInt = this.container.items.keys.indexOf(itemInt); } else if (typeof(itemInt) == "object") { itemInt = this.container.items.items.indexOf(itemInt); } var item = this.container.getComponent(itemInt); if(this.activeItem != item) { if(this.activeItem) { if(item && (!item.rendered || !this.isValidParent(item, this.container))) { this.renderItem(item, itemInt, this.container.getLayoutTarget()); item.show(); } var s = [this.container.body.getX() - this.container.body.getWidth(), this.container.body.getX() + this.container.body.getWidth()]; this.activeItem.el.shift({ duration: this.duration, easing: this.easing, opacity: this.opacity, x:(this.activeItemNo Height of the window * * @type Int */ height: 800, /** * Set to true to mask everything behind it * * @type Boolean */ modal: false, /** * Set to false to display a light color to the background * * @type Boolean */ plain: true, /** * Set to true to allow the resizing of the window * * @type Boolean */ resizable: false, /** * Set to true to allow to close the window * * @type Boolean */ closable: true, /** * Set to true to allow the window to collapse * * @type Boolean */ collapsible: false, /** * Set to true to constrain the movement of * the window to it's containing element * * @type Boolean */ constrain: true, /** * Set to true to allow dragging of the window * * @type Boolean */ draggable: true, /** * Set to true to show a shadow * * @type Boolean */ shadow: false, /** * Offset of the shadow in pixels * * @type Int */ shadowOffset: 4, /** * DOM ID of whre to render the window to * * @type String */ renderTo: null, /** * Array of steps. Each step is created as a seperate Panel * * @type Array */ steps: null, /** * Set true to animate the updating of the ProgressBar * * @type Boolean */ pbarAnim: true, /** * Height of the ProgressBar * * @type Int */ pbarHeight: 20, /** * Function that handles the cancel * * @type Function */ cancel: function() { this.close(); }, /** * Function that handles the finish * * @type Function */ finish: Ext.emptyFn, /** * */ initComponent: function() { if (this.shadow === true) { this.floating = true; } this.pbar = new Ext.Panel({ id: "progressPanel", frame: false, border: false, height: this.pbarHeight, items: [new Ext.ProgressBar({ id: "pbar", animate: this.pbarAnim })] }); this.cPanel = new Ext.Panel({ id: "cardPanel", frame: false, border: false, layout: "slide", flex: 1, layoutConfig: { easing: "none", duration: .5, opacity: .1 }, activeItem: 0, listeners: { "add": function(thisPanel, addedCmp, Index) { addedCmp.initialConfig.index = Index; } } }); if (this.steps) { if (this.steps.length > 0) { for (var i = 0; i ",{ id: "move-next", text: "下一步", disabled: false, handler: this.navHandler.createDelegate(this, [1]) },{ id: "finish", text: "完成", disabled: false, hidden: true, handler: function() { this.ownerCt.ownerCt.finish(); } }] }; Ext.apply(this, Ext.apply(this.initialConfig, config)); Ext.ux.Tutorial.superclass.initComponent.apply(thi s, arguments); this.on("show", this.onShow, this); }, /** * */ onShow: function() { Ext.ux.Tutorial.superclass.onShow.apply(this, arguments); var tmp = "步骤 1/"+this.cPanel.items.length+" \""+this.cPanel.layout.activeItem.initialConfig.ti tle1+"\""; Ext.getCmp("pbar").updateProgress((this.cPanel.lay out.activeItem.initialConfig.index+1)/this.cPanel.i tems.length, tmp); }, /** * */ navHandler: function(direction) { currStepPanel = this.cPanel.layout.activeItem; otherStepPanel = Ext.getCmp("card-"+(currStepPanel.initialConfig.in dex+direction)); var tmp = "步骤 "+(otherStepPanel.initialConfig.index+1)+"/"+this. cPanel.items.length+" "+otherStepPanel.initialConfig.title1; Ext.getCmp("pbar").updateProgress((otherStepPanel. initialConfig.index+1)/this.cPanel.items.length, tmp); this.cPanel.getLayout().setActiveItem(currStepPane l.initialConfig.index+direction); if (otherStepPanel.initialConfig.index === 0) { Ext.getCmp("move-prev").disable(); Ext.getCmp("move-prev").hide(); Ext.getCmp("cancel").enable(); Ext.getCmp("cancel").show(); } else { Ext.getCmp("move-prev").enable(); Ext.getCmp("move-prev").show(); Ext.getCmp("cancel").disable(); Ext.getCmp("cancel").hide(); } if (otherStepPanel.initialConfig.index === (this.cPanel.items.length-1)) { Ext.getCmp("move-next").disable(); Ext.getCmp("move-next").hide(); Ext.getCmp("finish").enable(); Ext.getCmp("finish").show(); } else { Ext.getCmp("move-next").enable(); Ext.getCmp("move-next").show(); Ext.getCmp("finish").disable(); Ext.getCmp("finish").hide(); } }, /** * */ createSteps: function(i) { if (!this.steps[i].bodyStyle) { this.steps[i].bodyStyle = ""; } if (!this.steps[i].cls) { this.steps[i].cls = ""; } this.cPanel.add(new Ext.Panel({ id: "card-"+i, frame: false, border:false, bodyStyle: this.steps[i].bodyStyle, cls: this.steps[i].cls, title1: this.steps[i].title, items:this.steps[i].items // html: this.steps[i].html })); } }); Ext.ComponentMgr.registerType("ux-tutorial", Ext.ux.Tutorial); ------------------------------------------------- main.js Ext.onReady(function() { var finishFn = function() { alert("这里提交数据..."); } var cancelFn = function() { win.close(); } var win = new Ext.ux.Tutorial({ id: "simple-tutorial", title: "布局", width: 500, height: 350, cancel: cancelFn, finish: finishFn, steps: [{ title: "第一步(基本信息)", border: false, layout: "fit", items: { xtype: "form", border: false, labelWidth: 60, bodyStyle: "padding:20px;", defaults: { defaults: { border: false, defaults: { border: false} }, border: false }, items: [ { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "姓名", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "年龄", anchor: "90%" }, columnWidth: .5 } ] }, { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "性别", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "籍贯", anchor: "90%" }, columnWidth: .5 } ] }, { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "学历", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "地址", anchor: "90%" }, columnWidth: .5 } ] } ] } }, { title: "第二步(详细信息)", border: false, layout: "fit", items: { xtype: "form", border: false, labelWidth: 60, bodyStyle: "padding:20px;", defaults: { defaults: { border: false, defaults: { border: false} }, border: false }, items: [ { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "公司", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "邮箱", anchor: "90%" }, columnWidth: .5 } ] }, { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "网站", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "行业", anchor: "90%" }, columnWidth: .5 } ] }, { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "身高", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "体重", anchor: "90%" }, columnWidth: .5 } ] } ] } }, { title: "第三步(扩展信息)", border: false, layout: "fit", items: { xtype: "form", border: false, labelWidth: 60, bodyStyle: "padding:20px;", defaults: { defaults: { border: false, defaults: { border: false} }, border: false }, items: [ { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "扩展信息1", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "扩展信息2", anchor: "90%" }, columnWidth: .5 } ] }, { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "扩展信息3", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "扩展信息4", anchor: "90%" }, columnWidth: .5 } ] }, { layout: "column", items: [ { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "扩展信息5", anchor: "90%" }, columnWidth: .5 }, { layout: "form", items: { xtype: "textfield", name: "", fieldLabel: "扩展信息6", anchor: "90%" }, columnWidth: .5 } ] } ] } }] }).show(); }); ----------------------------------- index.html ExtJS Tutorial Extension
发表评论
-
TC官方文档翻译03----可扩充字符串API(Tokyo Cabinet/Tokyo Tyarnt 文档系列)
2012-07-06 09:52 582/** * 转载请注明出处, 由于个人技术能力有限, 英 ... -
初见C#之欣喜 -- 有关正则和LINQ
2012-07-06 09:46 856这两天由于作业的原因用C#写了个小程序,苦恼于陌生的函数、 ... -
各种视图组件
2012-07-03 13:44 730TabHost包含: 布局器: 上边:一个TabW ... -
给FlexViewer加一个登录
2012-07-02 12:56 640打开index.mxml,修改如下: flex/sp ... -
[Bindable]元数据标签举例
2012-07-02 12:56 669【描述】 现在想从后台的数据库里读取一些Produc ... -
学习组件拖拽
2012-07-02 12:56 715height="323" ... -
Using the Adobe AIR 2 NativeProcess API to create a screen recorder
2012-07-02 12:56 1350With the release of AIR 2, Ad ... -
整理电脑,整理大脑
2012-07-01 10:31 751电脑硬盘空间不足了,该怎么办呢? 增加硬盘空间,我真 ... -
Android 源码下载编译
2012-07-01 10:31 819很久以前写的,从那个博客搬过来的。 … 一、系 ... -
开发知识总结
2012-07-01 10:31 753总结一下自己在开发上的一些小心得,持续更新,欢迎大家补充! ... -
完整的Flex多文件上传实例
2012-07-01 10:31 436客户端代码:fileUpload.xml--------- ... -
像Youtube一样的flv视频网站制作 使用Flex和PHP创建自己的视频应用
2012-07-01 10:31 753转帖:http://blog.sina ... -
2011年11月01日
2012-06-30 16:52 9892011年11月01日 2011年11月 ... -
[转]Q版格斗游戏《口袋战士NOVA》开发心得[原创]
2012-06-30 16:52 892[转]Q版格斗游戏《口袋战士NOVA》开发心得[原创] 20 ... -
本创:如何才气建制出劣秀的Facebook游戏?
2012-06-30 16:52 811本创:如何才气建制出劣 ... -
中国网络游戏发展历史大全 .网络游戏
2012-06-30 16:52 686中国网络游戏发展历史大全 .网络游戏 2011年07月14日 ...
相关推荐
EXTJS3.0扩展例子集合...内含源代码...
extjs扩展教程 extjs扩展教程extjs扩展教程
ExtJs:收集基于ExtJs扩展的一些控件 ExtJs:收集基于ExtJs扩展的一些控件
本文是extjs的扩展包,可以在页面中插入图片,把这个js文件放入相应的目录下,extjs就是引用这个类型,就可以插入图片
ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy,经过EXT3.0版本测试! 通过DWR向Ext提供数据!非常棒的扩展!
dreamweaver Extjs 扩展插件语法提示 在dreamweaver中可以显示Extjs语法提示,提升开发效率,用起来很方便 分.zxp和.mxp两种扩展 cc2015,cs6均可用。 扩展安装需要到用Adobe Extension Manager,请自行在网上百度,...
ExtJS扩展包(ExtJsExtenderControl)ExtExtenders
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
extjs扩展年度控件,EXTJS里的时间控件的年度重写
ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次
ExtJS扩展:lovcombo(已解决Bug版) 内赋详细使用说明
extjs扩展标记 ,实现extjs的jsp标签,功能强大
实现对Ext树进行分页的组件,扩展了TreeLaoder和PagingToobar
Extjs表单VTYPE扩展,方便验证!
扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) EXTJS4.1文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--...
extjs多选 下拉框扩展
一个功能完整的增删改查Extjs Grid 扩展实例.
Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-examples-ux 89
ExtJs中datetimefield扩展,不缺少任何文件,可以直接浏览效果,查看扩展代码
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用