ExtJs 扩展 笔录1

　　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