/**************************************************************** Copyright notice** (c) 2007-2008 Timo Michna / www.matikom.de* All rights reserved** This script is free software; you can redistribute it and/or modify* it under the terms of the GNU General Public License as published by* the Free Software Foundation; either version 3 of the License, or* (at your option) any later version.** The GNU General Public License can be found at* http://www.gnu.org/copyleft/gpl.html.*** This script is distributed in the hope that it will be useful,* but WITHOUT ANY WARRANTY; without even the implied warranty of* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the* GNU General Public License for more details.** This copyright notice MUST APPEAR in all copies of the script!***************************************************************//**************************************************************** For commercial use, ask the author for permission and different license***************************************************************/Ext.namespace('Ext.ux');Ext.namespace('Ext.ux.Plugin');Ext.ux.Plugin.LiteRemoteComponent = function (config){var defaultType = config.xtype || 'panel'; var callback = function(res){ var mask = new Ext.LoadMask(this.container.bwrap, Ext.apply({msg:'正在加载组件...'}, {}));mask.show();this.container.add(Ext.ComponentMgr.create(Ext.decode(res.responseText), defaultType)).show();this.container.doLayout() ;mask.hide();}; return{init : function (container){this.container = container;Ext.Ajax.request(Ext.apply(config, {success: callback, scope: this})); }}};/** * @author Timo Michna / matikom * @class Ext.ux.Plugin.RemoteComponent * @extends Ext.util.Observable * @constructor * @param {Object} config * @version 0.3.0 * Plugin for Ext.Container/Ext.Toolbar Elements to dynamically * add Components from a remote source to the Element�s body. * Loads configuration as JSON-String from a remote source. * Creates the Components from configuration. * Adds the Components to the Container body. * Additionally to its own config options the class accepts all the * configuration options required to configure its internal Ext.Ajax.request(). */Ext.ux.Plugin.RemoteComponent = function (config){ /** * @cfg {String} breakOn * set to one of the plugins events, to stop any * further processing of the plugin, when the event fires. */ /** * @cfg {mixed} loadOn * Set to one of the Containers events {String}, to defer * further processing of the plugin to when the event fires.* Set as an object literal {event: 'event', scope: 'scope'} * to listen for a different components (not the container) event. * Set to an numeric Array to listen to different events or components. * Use String or Literal style in numeric Array. Plugin will load by* the first occurence of any of the events. */ /*** @cfg {String} xtype * Default xtype for loaded toplevel component.* Overwritten by config.xtype or xtype declaration * Defaults to 'panel'* in loaded toplevel component.*/ /*** @cfg {Boolean} purgeSubscribers * set to 'true' to avoid unsubstribing all listeners after successfull process chain * Defaults to false*/ /*** @cfg {Mixed el} mask * The element or DOM node, or its id to mask with loading indicator */ /*** @cfg {Object} maskConfig * Configuration for LoadMask.* only effective if config option 'mask' is set. */var defaultType = config.xtype || 'panel';Ext.applyIf(config, {purgeSubscribers:true});this.initialConfig = config; Ext.apply(this, config); //this.purgeSubscribers = config.purgeSubscribers || true; this.addEvents({ /** * @event beforeload * Fires before AJAX request. Return false to stop further processing. * @param {Object} config * @param {Ext.ux.Plugin.RemoteComponent} this */ 'beforeload' : true, /** * @event beforecreate * Fires before creation of new Components from AJAX response. * Return false to stop further processing. * @param {Object} JSON-Object decoded from AJAX response * @param {Ext.ux.Plugin.RemoteComponent} this */ 'beforecreate' : true, /** * @event beforeadd * Fires before adding the new Components to the Container. * Return false to stop further processing. * @param {Object} new Components created from AJAX response. * @param {Ext.ux.Plugin.RemoteComponent} this */ 'beforeadd' : true, /** * @event beforecomponshow * Fires before show() is called on the new Components. * Return false to stop further processing. * @param {Object} new Components created from AJAX response. * @param {Ext.ux.Plugin.RemoteComponent} this */ 'beforecomponshow': true, /** * @event beforecontainshow * Fires before show() is called on the Container. * Return false to stop further processing. * @param {Object} new Components created from AJAX response. * @param {Ext.ux.Plugin.RemoteComponent} this */ 'beforecontainshow': true, /** * @event success * Fires after full process chain. * Return false to stop further processing. * @param {Object} new Components created from AJAX response. * @param {Ext.ux.Plugin.RemoteComponent} this */ 'success': true });Ext.ux.Plugin.RemoteComponent.superclass.constructor.call(this, config);// set breakpoint if(config.breakOn){ this.on(config.breakOn, function(){return false;});} /** * private * method adds component to container. * Creates Components from responseText and * and populates Components in Container. * @param {Object} JSON Config for new component. */var renderComponent = function(JSON){if(this.fireEvent('beforeadd', JSON, this)){//this.container.initComponent();component = this.container.add(JSON);if(this.fireEvent('beforecomponshow', component, this)){return component;} } }.createDelegate(this); /** * private * Callback method for successful Ajax request. * Creates Components from responseText and * and populates Components in Container. * @param {Object} response object from successful AJAX request. */ var callback = function(res){ var JSON = Ext.decode(res.responseText);if(this.fireEvent('beforecreate', JSON, this)){var component = null;//JSON = JSON instanceof Array ? JSON[0] : JSON;if(JSON instanceof Array){Ext.each(JSON, function(j, i){component = renderComponent(j).show();;});}else{component = renderComponent(JSON).show();}if(this.fireEvent('beforecontainshow', component, this)){var mask = new Ext.LoadMask(this.container.bwrap, Ext.apply({msg:'正在加载组件...'}, {}));mask.show();this.container.doLayout();mask.hide();this.fireEvent('success', component, this);} } if(this.purgeSubscribers){this.purgeListeners();}}.createDelegate(this); /** * public * Processes the AJAX request. * Generally only called internal. Can be called external, * when processing has been stopped or defered by config * options breakOn or loadOn. */this.load = function(){if(this.fireEvent('beforeload', config, this)){config.url = this.url;if(config.mask){var mask = new Ext.LoadMask(Ext.getDom(config.mask), Ext.apply({msg:'loading components...'}, config.maskConfig || {}));mask.show();this.on('success', mask.hide, mask);}if (config.baseParams) {Ext.apply(config.baseParams, {ajax:true});} else {config.baseParams = {ajax:true};}Ext.Ajax.request(Ext.apply(config, {success: callback, scope: this}));} }; /** * public * Initialization method called by the Container. */ this.init = function (container){container.on('beforedestroy', function(){this.purgeListeners();}, this);this.container = container;if(config.loadOn){ if(config.loadOn instanceof Array){Ext.each(config.loadOn, function(l, i, a){var evt = l.event || l.loadOn;var defer = function (){this.load();Ext.each(a, function(lo){(lo.scope || container).un(evt, defer, this);}.createDelegate(this));}.createDelegate(this);(l.scope || container).on(evt, defer, this);}.createDelegate(this));}else{(config.loadOn.scope || container).on((config.loadOn.event || config.loadOn), this.load, this, {single:true});}}else{this.load();} };};Ext.extend(Ext.ux.Plugin.RemoteComponent, Ext.util.Observable);Ext.preg('remoteComponent',Ext.ux.Plugin.RemoteComponent);,plugins:[new Ext.ux.Plugin.RemoteComponent({ url: 'callControl/callpolice/110_casetypes_page.cctc' ,method:'post' ,params:{} })]
