日期:2014-05-16  浏览次数:20402 次

[ExtJS] MVC应用架构示例
1
项目目录结构



2.
app.js
Ext.Loader.setConfig({
			enabled : true,
			paths : {
				'Ext' : 'extjs',
				'App' : 'app',
				'Ext.ux' : 'extjs/ux'
			}
		});

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

Ext.require('Ext.container.Viewport');

Ext.application({
			name : 'App',
			appFolder : 'app',
			controllers : ['poll'],
			launch : function() {
				Ext.create('Ext.container.Viewport', {
							layout : 'fit',
							items : [{
                                        xtype : 'poll'
                                    }]
						});
			}
});




3.
控制器 poll.js
Ext.define('App.controller.poll', {
	extend : 'Ext.app.Controller',
	views : ['poll', 'pollQuery', 'pollList', 'pollEdit', 'pollAdd'],
    stores : ['poll'],
    models : ['poll'],
	init : function() {
		this.control({
			'pollQuery' : {
				'beforerender' : function() {
					var view = Ext.ComponentQuery.query('pollQuery')[0];
					view.loadView();
				}
			},
            
            'pollQuery form button[action=submit]' : {
                'click' : function() {
                    var formCmp = Ext.ComponentQuery.query('pollQuery form')[0];
                    var basicForm = formCmp.getForm();
	                if (basicForm.isValid()) {
                         Ext.Msg.alert("信息", "模糊查询所有文本字段.");
	                }
                }
            },
            
            'pollQuery form button[action=reset]' : {
                'click' : function() {
                    var formCmp = Ext.ComponentQuery.query('pollQuery form')[0];
                    var basicForm = formCmp.getForm();
                    basicForm.reset();
                }
            },
            
            'pollQuery form button[action=submit2]' : {
                'click' : function() {
                    var formCmp = Ext.ComponentQuery.query('pollQuery form')[1];
                    var basicForm = formCmp.getForm();
                    if (basicForm.isValid()) {
                        Ext.Msg.alert("信息", "模糊查询所有文本字段.");
                    }
                }
            },
            
            'pollQuery form button[action=reset2]' : {
                'click' : function() {
                    var formCmp = Ext.ComponentQuery.query('pollQuery form')[1];
                    var basicForm = formCmp.getForm();
                    basicForm.reset();
                }
            },

			'pollList' : {
				'beforerender' : function() {
					var view = Ext.ComponentQuery.query('pollList')[0];
					view.loadView();
				}
			},

			'pollList > grid' : {
				'itemdblclick' : function(table, record, html, row, event, opt) {
					var view = Ext.widget('pollEdit');
					view.loadView();
					view.show();
					view.down('form').loadRecord(record);
				}
			},
            
            'pollList > grid button[action=add]' : {
                'click' : function() {
                    var view = Ext.widget('pollAdd');
                    view.loadView();
                    view.show();
                }
            },
            
            'pollList > grid button[action=remove]' : {
                'click' : function() {
                    var grid = Ext.ComponentQuery.query('pollList > grid')[0];
                    var sm = grid.getSelectionModel();
                    grid.store.remove(sm.getSelection());
                    
                    // 提交后台
                }
            },

			'pollEdit button[action=save]' : {
				'click' : function(button, event, opt) {
					var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues();
					record.set(values);
					win.close();
					this.getPollStore().sync();
                    
                    // 提交后台
				}
			},
            
            'pollE