春节后开始在新的项目里用extjs做前台开发的。到现在也三个月了。从完全不会,到有样学样。总算是基本掌握了。(虽然远谈不上精通,甚至熟练的程度都还不好说)现在总结一下开发的心得和一些套路。
extjs 讲究是的组件化开发。任何界面都是可以做成一个复用的组件。所以一个功能模块里基本都是一些各类组件的布局和组合,所有的业务功能都是这些组件之间的交互。
大体上常用的组件包括:tabpanel、panel、formpanel、grid、window等,分别用来实现以选项卡片的形式组织子模块,子模块的主界面、输入表单、查询列表、弹出窗口等ui元素。
基本的开发套路大致是:
一、从大到小,细分出各类组件,分别定义它们
1、确定该模块要划分为几个子模块,这决定需要几个选项标签,通过点击不同的标签切换到不同的子模块中。
适用组件类型:Ext.TabPanel
2、在确定好各个子模块后,为每个子模块定义一个主界面。用来布局各类功能点,包括:查询表单、查询结果的展示列表、相关功能点的按钮,比如增删改等等。
适用组件类型:Ext.Panel
3、分别定义各类界面元素,包括基本表单、查询表单、工具条、列表、窗口等等
适用组件类型:Ext.FormPanel,Ext.grid.toolbar, Ext.gridPanel
二、根据已有细分的组件,组成各类界面,并进行布局。
1、将formpanel组合到window中,可以形成新增或编辑窗口,可以用grid实例或oid作为参数
2、将查询表单、grid等组件组合到为子模块定制的panel中,形成进入该子模块后的主界面,一切操作重这里开始
3、将各子模块的主界面panel组合到模块的索引界面(即tabpanel)中。形成一个完整的功能模块。
以上套路是个人总结,不一定最合适,先到这里。
本想发一张uml图来说明这些关系的。没找到合适的工具。
extjs 讲究是的组件化开发。任何界面都是可以做成一个复用的组件。所以一个功能模块里基本都是一些各类组件的布局和组合,所有的业务功能都是这些组件之间的交互。
大体上常用的组件包括:tabpanel、panel、formpanel、grid、window等,分别用来实现以选项卡片的形式组织子模块,子模块的主界面、输入表单、查询列表、弹出窗口等ui元素。
基本的开发套路大致是:
一、从大到小,细分出各类组件,分别定义它们
1、确定该模块要划分为几个子模块,这决定需要几个选项标签,通过点击不同的标签切换到不同的子模块中。
适用组件类型:Ext.TabPanel
2、在确定好各个子模块后,为每个子模块定义一个主界面。用来布局各类功能点,包括:查询表单、查询结果的展示列表、相关功能点的按钮,比如增删改等等。
适用组件类型:Ext.Panel
3、分别定义各类界面元素,包括基本表单、查询表单、工具条、列表、窗口等等
适用组件类型:Ext.FormPanel,Ext.grid.toolbar, Ext.gridPanel
二、根据已有细分的组件,组成各类界面,并进行布局。
1、将formpanel组合到window中,可以形成新增或编辑窗口,可以用grid实例或oid作为参数
2、将查询表单、grid等组件组合到为子模块定制的panel中,形成进入该子模块后的主界面,一切操作重这里开始
3、将各子模块的主界面panel组合到模块的索引界面(即tabpanel)中。形成一个完整的功能模块。
以上套路是个人总结,不一定最合适,先到这里。
本想发一张uml图来说明这些关系的。没找到合适的工具。