1南南昌航空大学科技学院2016届学士学位论文1引言自从B2C购物出现在人们的视野中，电子商务就在全世界范围内受到了格外的关注，并且得到了快速的发展。从现实角度来看，目前购物网站的普遍用户是购买者难以自己想要购买的商品甚至用户在耗费很大的精力和时间后即使找到了自己想要的产品，最后却由于其他原因而放弃购买。很多报道指出，推销商们普遍对目前的网络行销感到失望，尽管如此，电子商务无疑是目前最好的在线商品展示的媒体和工具。然而，网上产品展示的目的不仅仅是展示产品，而更重要的是通过让客户更多地了解产品而提高产品的购买率。因此，购物网站目前所面临的最大挑战之一就是网站的设计，如何使得网页能够有效地展示自己的产品，同时方便用户的使用，使用户以愉悦的心情选购称心如意的商品。本系统的目的和意义就是应上述挑战而尝试为用户提供一个操作简单方便的网上交易系统。利用本系统，用户可以自由地浏览商品，注册成为网站会员，选择商品加入自己的购物车，而后生成订单，实现网上购物。2系统应用的关键技术2.1EXTJSMVC的介绍ExtJs前台我分为了model,store,view,controller层4层架构，对于model层,用于接收后台传入的Pojo封装成前台数据Model中,创建一个model需要define的一个继承于Ext.data.Model的一个类,其中关键不可少的配置项是fields,例如fields:[{name:"id",type:"int",srotable:true},{name:"text",type:"string",srotable:true}]其中name代表字段名称,type为字段类型,类型只有string、float、int、boolean、date、auto(默认值,意味着无convert方法)6种对应后台pojo，形成一条数据，而stroe层则是数据集合,也就是model的集合。开发时我们经常是用代理的方式从后台获取一条json数据，形成stroe，如2南南昌航空大学科技学院2016届学士学位论文proxy:{type:"ajax",url:"./category/combo_category.do",reader:{type:"json",root:"rows"},writer:{type:"json"}}是用ajax的代理方式从后台获取一个数据集,stroe还得指定你使用的model是那个,model配置项就可以指定你要指定的Model类,用字符串的形式写上类名即可配置好stroe.这时候搭建主面板视图,主面板是一个border布局,上方是login信息以及系统名称,左边属性图，中部是数据表格以及一些表单。完成的mvc架构还需要controller层，这时候我们要先建立一个app.js,内容如下:Ext.onReady(function(){Ext.QuickTips.init();//开启提示功能Ext.Loader.setConfig({//动态加载js文件enabled:true});Ext.application({name:"core",//名称appFolder:"./core",//所在的目录launch:function(){Ext.create("Ext.container.Viewport",{layout:"fit",border:0,items:[{xtype:"mainviewlayout"}]});},controllers:["core.app.controller.MainController"]});});我们用一个Viewport搭建系统主界面，其中items中放入的mainviewlayout就是系统主视图的别名,通过这种方式可以直接加载mianviewlayout类到页面,Cotrollers配置的则是我们的控制器层，控制器层的声明也相当的简单,创建一个继承与Ext.app.controller的类,写一个初始化方法中的this.controller方法中则3南南昌航空大学科技学院2016届学士学位论文是我们控制界面按钮效果的主要地方。我在搭建这套界面是写了一个公用的加载其他控制器和页面视图的方法:this.addFunItem=function(funInfo){if(funInfo){varmainView=funInfo.mainView;varfunPanel=mainView.down(funInfo.funViewXtype);if(!funPanel){self.application.getController(funInfo.funController).init();funPanel=Ext.create(funInfo.funViewName);mainView.add(funPanel);mainView.setActiveTab(funPanel);}else{mainView.setActiveTab(funPanel);}}},传入funInfo是一个js对象，用来加载不同views,models,stores，实现点击左侧树形图，加载不同的数据表格表单树形等不同的数据展示效果.2.2数据表格的形成ExtJS中的数据表格中的每一条数据对应的都是Model,所有记录则是一个数据集合,所以数据表格中我们肯定要配置的有stroe对象,为了形成数据表格中可以形成复选框多选的效果我们需要加入的配置项有selModel:{se...
