公司没有前端,哥前后一起捞,没办法只有弄富客户端,发现extjs的mvc模式不错,当然这种框架是重量级的,做管理系统还可以,如果访问量大系统还是建议原生html+css+javascript效率是最高的。
项目结构:
Ext.application({ requires: ['Ext.container.Viewport'], name: 'Ether', appFolder: 'app', controllers: ['UserController'], launch: function () { console.info('launch...'); Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'userlist' } ] }); } }); Ext.define('Ether.controller.UserController', { extend: 'Ext.app.Controller', stores: ['UserStore'], models: ['UserModel'], views: ['user.List', 'user.Edit'], init: function () { console.log('Initialized Users! This happens before the Application launch function is called'); this.control({ 'viewport > panel': { render: this.onPanelRendered }, 'userlist': { itemdblclick: this.editUser }, 'useredit button[action=save]': { click: this.updateUser } }); }, onPanelRendered: function () { console.info('onPanelRendered.....'); }, editUser: function (grid, record) { console.log('Double clicked on ' + record.get('name')); var view = Ext.widget('useredit'); view.down('form').loadRecord(record); }, updateUser: function (button) { console.info('updateUser'); var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(); record.set(values); win.close(); this.getUserStoreStore().sync(); // this.getUserStoreStore().load(); } }); Ext.define('Ether.model.UserModel', { extend: 'Ext.data.Model', idProperty: 'name', fields: ['name', 'email'] }); Ext.define('Ether.store.UserStore', { extend: 'Ext.data.Store', model: 'Ether.model.UserModel', autoLoad: true, pageSize : 15, proxy: { type: 'ajax', url: '', api: { read: 'data/alluser.json', update: 'data/update.json' }, reader: { type: 'json', root: 'users', successProperty: 'success' } } }) Ext.define('Ether.view.user.List', { extend: 'Ext.grid.Panel', alias: 'widget.userlist', title: 'All Users', store: 'UserStore', initComponent: function () { this.columns = [ {header: 'Name', dataIndex: 'name', flex: 1}, {header: 'Email', dataIndex: 'email', flex: 1} ]; this.callParent(arguments); } }); Ext.define('Ether.view.user.Edit', { extend: 'Ext.window.Window', alias: 'widget.useredit', title: 'Edit User', layout: 'fit', autoShow: true, padding: '10 10 5 10', initComponent: function () { this.items = [ { xtype: 'form', items: [ { xtype: 'textfield', name: 'name', fieldLabel: 'Name' }, { xtype: 'textfield', name: 'email', fieldLabel: 'Email' } ] } ]; this.buttons = [ { text: 'Save', action: 'save' }, { text: 'Cancel', scope: this, handler: this.close } ]; this.callParent(arguments); } });