ExtJS向导创建工具

之前项目有要用到向导创建发票的功能,于是自己写了个向导创建工具。项目是基于ext做的前台。

主要由两个类来维护整个向导的流程。

WizardWrapper,该类用于包装一个panel,并且会根据时机呈现在向导的过程中。

Wizard,该了管理所有的WizardWrapper,形成了一个信息交换的场所。更多的信息,请参见代码,我有在后面附两个类的代码,并且有一个实例。

下面附下图,可能更直观点

1

借鉴以前的使用的向导的经验,貌似都有个启动界面和结束界面。不过放心,这个是可以配置显示否。

2

见图片上的注释。需要WizardWrapper提供稍微不一样的信息来给予支持。可能窗体的大小或者布局不大合适,这里面的面板的布局非Wizard的职责,窗体的小的话可以配置WizardWrapper的width,height,还有标题可以配置title。

3

分支之一,返回上一步再选择分支二

4

分支二,同样你可以返回到上一步选择分支一。另外,下面有4个标准按钮,上一步、下一步、取消、完成。默认显示前3个,如果需要特殊的显示可以在WizardWrapper中配置,建议使用enableButtons配置节(详见代码注释)。

5

详细模式,继续下一步的结果

6

返回到简单模式,所得到的结果。结束了。

7

wizard.js   WizardWrapper.js   示例 

注意使用的是extjs3.03版本,为了保证有效性,请使用3.03以上的版本。更多内容在代码文件中

email:mozily@qq.com

posted @ 2011-01-01 03:22  Dickhead  阅读(1550)  评论(2)    收藏  举报