<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Creotiv lives here &#187; Application</title>
	<atom:link href="http://creotiv.in.ua/tags/application/feed/" rel="self" type="application/rss+xml" />
	<link>http://creotiv.in.ua</link>
	<description>Блог Андрея Никишаева об IT, менеджменте, SEO и фотографии</description>
	<lastBuildDate>Thu, 26 Apr 2012 13:23:05 +0000</lastBuildDate>
	<language>ru</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>ExtJs application architecture</title>
		<link>http://creotiv.in.ua/%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b0%d0%bc%d0%bc%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5/extjs-application-architecture/</link>
		<comments>http://creotiv.in.ua/%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b0%d0%bc%d0%bc%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5/extjs-application-architecture/#comments</comments>
		<pubDate>Fri, 06 Nov 2009 22:24:48 +0000</pubDate>
		<dc:creator>Андрей Никишаев</dc:creator>
				<category><![CDATA[Программирование]]></category>
		<category><![CDATA[Application]]></category>
		<category><![CDATA[architecture]]></category>
		<category><![CDATA[extjs]]></category>

		<guid isPermaLink="false">http://creotiv.in.ua/?p=945</guid>
		<description><![CDATA[Created some base interface classes that implements Application architecture into ExtJS script.]]></description>
			<content:encoded><![CDATA[<p>Created some base interface classes that implements Application architecture into ExtJS script.<br />
Base function of this architecture is:</p>
<ul>
<li>Modularity</li>
<li>Auto-adding modules to the application</li>
<li>Incapsulation</li>
</ul>
<p><a href="http://creotiv.in.ua/examples/extjs/" target="_blank">Example</a></p>
<p><span id="more-945"></span><br />
Inckudes structure:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;"> &lt;script src=&quot;/libraries/extjs/adapter/ext/ext-base.js&quot; type=&quot;'text/javascript'&quot;&gt;&lt;!--mce:0--&gt;&lt;/script&gt;
 &lt;script src=&quot;/libraries/extjs/ext-all.js&quot; type=&quot;'text/javascript'&quot;&gt;&lt;!--mce:1--&gt;&lt;/script&gt;
 &lt;!--Interface classes--&gt;
 &lt;script src=&quot;/app/lib/app.js&quot; type=&quot;'text/javascript'&quot;&gt;&lt;!--mce:2--&gt;&lt;/script&gt;
 &lt;script src=&quot;/app/lib/module.js&quot; type=&quot;'text/javascript'&quot;&gt;&lt;!--mce:3--&gt;&lt;/script&gt;
 &lt;!--Application classes--&gt;
 &lt;script src=&quot;/app/application.js&quot; type=&quot;'text/javascript'&quot;&gt;&lt;!--mce:4--&gt;&lt;/script&gt;
 &lt;script src=&quot;/app/modules/tasks.js&quot; type=&quot;'text/javascript'&quot;&gt;&lt;!--mce:5--&gt;&lt;/script&gt;</pre></div></div>

<p>App abstract class:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">App <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>cfg<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    Ext.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> cfg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">addEvents</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #3366CC;">'ready'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
        <span style="color: #3366CC;">'beforeunload'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    Ext.<span style="color: #660066;">onReady</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">initApp</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
Ext.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>App<span style="color: #339933;">,</span> Ext.<span style="color: #660066;">util</span>.<span style="color: #660066;">Observable</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
&nbsp;
    isReady<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span>
    modules<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    initApp <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">//Modules must add themself to application</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">initModules</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        Ext.<span style="color: #660066;">EventManager</span>.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span>window<span style="color: #339933;">,</span> <span style="color: #3366CC;">'beforeunload'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #000066;">onUnload</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ready'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isReady</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    getModules <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">modules</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    init <span style="color: #339933;">:</span> Ext.<span style="color: #660066;">emptyFn</span><span style="color: #339933;">,</span>
&nbsp;
    initModules <span style="color: #339933;">:</span> Ext.<span style="color: #660066;">emptyFn</span><span style="color: #339933;">,</span>
&nbsp;
    start <span style="color: #339933;">:</span> Ext.<span style="color: #660066;">emptyFn</span><span style="color: #339933;">,</span>
&nbsp;
	addModule <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>module<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span>module.<span style="color: #660066;">id</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> module<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    getModule <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>id<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    	<span style="color: #003366; font-weight: bold;">var</span> ms <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">modules</span><span style="color: #339933;">;</span>
&nbsp;
    	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>ms<span style="color: #009900;">&#91;</span>id<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span> <span style="color: #000066; font-weight: bold;">return</span> ms<span style="color: #009900;">&#91;</span>id<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    onReady <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>fn<span style="color: #339933;">,</span> scope<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isReady</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ready'</span><span style="color: #339933;">,</span> fn<span style="color: #339933;">,</span> scope<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
            fn.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span>scope<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #000066;">onUnload</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'beforeunload'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            e.<span style="color: #660066;">stopEvent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>._desctruct<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>	
&nbsp;
	_desctruct <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Module abstract class:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">App.<span style="color: #660066;">Module</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>cfg<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    Ext.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> cfg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    App.<span style="color: #660066;">Module</span>.<span style="color: #660066;">superclass</span>.<span style="color: #660066;">constructor</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">addEvents</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #3366CC;">'ready'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
        <span style="color: #3366CC;">'beforeunload'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
Ext.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>App.<span style="color: #660066;">Module</span><span style="color: #339933;">,</span> Ext.<span style="color: #660066;">util</span>.<span style="color: #660066;">Observable</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	id <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span>						<span style="color: #006600; font-style: italic;">// linking name in Application</span>
	title <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span>
	description <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span>
	icoCls <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span> 					<span style="color: #006600; font-style: italic;">// used for button</span>
	logoCls <span style="color: #339933;">:</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">,</span> 					<span style="color: #006600; font-style: italic;">// used for logo	</span>
&nbsp;
	app <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span>						<span style="color: #006600; font-style: italic;">//backlink to Application</span>
&nbsp;
    init <span style="color: #339933;">:</span> Ext.<span style="color: #660066;">emptyFn</span><span style="color: #339933;">,</span>
&nbsp;
	start <span style="color: #339933;">:</span> Ext.<span style="color: #660066;">emptyFn</span><span style="color: #339933;">,</span>
&nbsp;
	onReady <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>fn<span style="color: #339933;">,</span> scope<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isReady</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">on</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ready'</span><span style="color: #339933;">,</span> fn<span style="color: #339933;">,</span> scope<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span>
            fn.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span>scope<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	<span style="color: #000066;">onUnload</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'beforeunload'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            e.<span style="color: #660066;">stopEvent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">this</span>._desctruct<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>	
&nbsp;
	_destruct <span style="color: #339933;">:</span> Ext.<span style="color: #660066;">emptyFn</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Application class:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Application <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> App<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
&nbsp;
	init <span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		Ext.<span style="color: #660066;">QuickTips</span>.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Application started'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	initModules <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #000066; font-weight: bold;">in</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">modules</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> m <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">modules</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
            m.<span style="color: #660066;">app</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">//backlink</span>
			m.<span style="color: #660066;">init</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">isReady</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	start <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getModule</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'tasks'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Tasks module class:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Application.<span style="color: #660066;">Tasks</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>cfg<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    Ext.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> cfg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    Application.<span style="color: #660066;">Tasks</span>.<span style="color: #660066;">superclass</span>.<span style="color: #660066;">constructor</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    Application.<span style="color: #660066;">addModule</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
Ext.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>Application.<span style="color: #660066;">Tasks</span><span style="color: #339933;">,</span> App.<span style="color: #660066;">Module</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	id <span style="color: #339933;">:</span> <span style="color: #3366CC;">'tasks'</span><span style="color: #339933;">,</span>							<span style="color: #006600; font-style: italic;">// linking name in Application</span>
	title <span style="color: #339933;">:</span> <span style="color: #3366CC;">'Tasks'</span><span style="color: #339933;">,</span>
	description <span style="color: #339933;">:</span> <span style="color: #3366CC;">'Task for managment'</span><span style="color: #339933;">,</span>
	icoCls <span style="color: #339933;">:</span> <span style="color: #3366CC;">'task-ico'</span><span style="color: #339933;">,</span> 					<span style="color: #006600; font-style: italic;">// used for button</span>
	logoCls <span style="color: #339933;">:</span> <span style="color: #3366CC;">'task-logo'</span><span style="color: #339933;">,</span> 					<span style="color: #006600; font-style: italic;">// used for logo	</span>
&nbsp;
    init <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	start <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Tasks started'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
	_destruct <span style="color: #339933;">:</span> Ext.<span style="color: #660066;">emptyFn</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">new</span> Application.<span style="color: #660066;">Tasks</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://creotiv.in.ua/%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b0%d0%bc%d0%bc%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5/extjs-application-architecture/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

