1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    12
    Vote Rating
    2
    atwoodjw is on a distinguished road

      1  

    Default Rails 3.1 & ExtJS 4 (MVC)

    Rails 3.1 & ExtJS 4 (MVC)


    Following Drew Neil's Sencha Touch example from SenchaCon 2011, I set out to create a basic Rails 3.1 application w/ an Ext JS 4 (MVC) front-end.

    As Drew suggested, I structured the application like this.

    Code:
    app/
      models/
      views/
      controllers/
      assets/
        javascripts/
          app/
            controllers/
            models/
            stores/
            views/
    
    vendor/
      assets/
        javascripts/
          ext-4.0.7/
    All of the Ext JS code is written in CoffeeScript and managed by Rails' Asset Pipeline -- new in Rails 3.1.

    Just in case you're not familiar with Asset Pipeline...

    <%= javascript_include_tag "application" %>

    In development mode assets are served as separate files.

    Code:
    <script src="/assets/app/app.js?body=1" type="text/javascript"></script>
    <script src="/assets/app/MyController.js?body=1" type="text/javascript"></script>
    <script src="/assets/app/MyView.js?body=1" type="text/javascript"></script>
    But in production mode assets are precompiled/minimized and served as static assets with a fingerprint.

    Code:
    <script src="/assets/application-908e25f4bf641868d8683022a5b62f54.js" type="text/javascript"></script>
    In development mode, life is good -- the helper includes ext.js and app.js. From there, Ext.Loader loads framework & and application classes as needed.

    But in production mode, the helper includes ext.js and all application files (minimized with fingerprint). For some reason, Ext.Loader still tries to load classes dynamically, even though they're included in the minimized file. If I disable Ext.Loader, the "requires" properties in my views complain.

    Along the same lines, using ext.js in production is probably a bad idea too. It sounds like I need to tie into the assets:precompile task, using Sencha Tools to build the library.

    Any other Rails 3.1 users out there?

    Thanks!

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Posts
    12
    Vote Rating
    2
    atwoodjw is on a distinguished road

      1  

    Default


    I ended up just writing a Rake task, since I'm a Ruby n00b.

    Let me know if you come up with something better.

    Thanks,
    J

    Code:
    require 'coffee-script'
    require 'find'
    
    
    namespace :sencha do
    
    
      desc 'Compiles Ext JS application CoffeeScript and performs JSB3 build and create.'
      task :compile do
    
    
        tmp_js = "#{File.dirname(__FILE__)}/../../tmp/sencha"
    
    
        src_app = "#{File.dirname(__FILE__)}/../../app/assets/javascripts/app"
        tmp_app = File.expand_path("#{tmp_js}/assets/app")
    
    
        FileUtils.rm_rf tmp_js
    
    
        Find.find(src_app) do |f|
          if File.extname(f) == '.coffee'
            js_file = "#{tmp_app}#{f.gsub(src_app, "")}".chomp('.coffee')
            js_dir = File.dirname(js_file)
    
    
            js = CoffeeScript.compile File.read(f)
    
    
            FileUtils.mkdir_p js_dir if !File.exists?(js_dir)
            open js_file, 'w' do |f|
              f.puts js
            end
          end
        end
        
        # Moves app.js to top-level.
        FileUtils.mv "#{tmp_app}/app.js", "#{tmp_js}/app.js"
        
        # Copies template app.html needed for Sencha SDK Tools.
        FileUtils.cp "#{File.dirname(__FILE__)}/../assets/app.html", "#{tmp_js}/app.html"
        
        ## Create Ext JS library symlink.
        ext = "#{File.dirname(__FILE__)}/../../public/ext"
        ext_symlink = "#{tmp_js}/ext"
    
    
        File.symlink(ext, ext_symlink)
    
    
        # Create JSB3 file for Docs app
        system("sencha", "create", "jsb", "-a", "#{tmp_js}/app.html", "-p", "#{tmp_js}/app.jsb3")
        
        # Update JSB3 meta-data.
        jsb3 = File.read("#{tmp_js}/app.jsb3")
        
        jsb3 = jsb3.gsub("Project Name", "My Project")
        jsb3 = jsb3.gsub("Company Name", "My Company")
        
        File.open("#{tmp_js}/app.jsb3", "w") do |f|
          f.write jsb3
        end
        
        system("sencha", "build", "-p", "#{tmp_js}/app.jsb3", "-d", tmp_js)
      end
    end

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    1
    Vote Rating
    0
    Hector_Villalobos is on a distinguished road

      0  

    Default Some fixes

    Some fixes


    Hey, thanks for that code, I made some changes to make it work on my environment:

    Code:
    require 'coffee-script'
    require 'find'
    
    
    namespace :sencha do
    
    
      desc 'Compiles Ext JS application CoffeeScript and performs JSB3 build and create.'
      task :compile do
    
    
        tmp_js = "#{File.dirname(__FILE__)}/../../tmp/sencha"
    
    
        src_app = "#{File.dirname(__FILE__)}/../../app/assets/javascripts"
    
    
        tmp_app = File.expand_path("#{tmp_js}/assets")
    
    
        FileUtils.rm_rf tmp_js
    
    
        Find.find(src_app) do |f|
          if File.extname(f) == '.coffee'
            js_file = "#{tmp_app}#{f.gsub(src_app, "")}".chomp('.coffee')
            js_dir = File.dirname(js_file)
    
    
            js = CoffeeScript.compile File.read(f)
    
    
            FileUtils.mkdir_p js_dir if !File.exists?(js_dir)
            open js_file, 'w' do |f|
              f.puts js
            end
          end
        end
        
        # Moves app.js to top-level.
        FileUtils.mv "#{tmp_app}/app.js", "#{tmp_js}/app.js"
        
        ## Create Ext JS library symlink.
        ext = "#{File.dirname(__FILE__)}/../../vendor/assets/javascripts/ext/"
        ext_symlink = "#{tmp_app}/ext"
    
    
        File.symlink(ext, ext_symlink)
    
    
        # Create JSB3 file for Docs app
        # requires the server up and running
        system("sencha", "create", "jsb", "-a", 
                "http://localhost:3000", "-p", "#{tmp_js}/app.jsb3")
        
        # Update JSB3 meta-data.
        jsb3 = File.read("#{tmp_js}/app.jsb3")
        
        jsb3 = jsb3.gsub("Project Name", "My Project")
        jsb3 = jsb3.gsub("Company Name", "My Company")
        
        File.open("#{tmp_js}/app.jsb3", "w") do |f|
          f.write jsb3
        end
        
        system("sencha", "build", "-p", "#{tmp_js}/app.jsb3", "-d", tmp_js)
    
    
        FileUtils.mv "#{tmp_js}/all-classes.js", "#{File.dirname(__FILE__)}/../../app/assets/javascripts/all-classes.js"
        FileUtils.mv "#{tmp_js}/app-all.js", "#{File.dirname(__FILE__)}/../../app/assets/javascripts/app-all.js"
      end
    end

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Location
    Colorado Springs, CO
    Posts
    33
    Vote Rating
    1
    michaelbdavid is on a distinguished road

      0  

    Default


    Hi atwoodjw,

    I'm attempting to do something similar but running into trouble with how I can add extjs to the pipeline and still have dynamic loading work correctly. Seeing a lot of Ext.Loader is not enabled when I attempt to dynamically load classes like:

    Code:
    Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Ext.util.Draggable
    
    
    [IMG]chrome://firebug/content/blank.gif[/IMG] slice.call( docElem.childNodes, 0 )[0].nodeType;application.js (line 114738)
    Error: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: Keystone.MyWindow
    [IMG]chrome://firebug/content/blank.gif[/IMG] 1) ? &quot;es&quot; : &quot;&quot;) + &quot;: &quot; + classNames.join(', '));" class="errorSourceCode ">... required class" + ((classNames.length > 1) ? "es" : "") + ": " + classNames.joi...
    as a result of adding mixins like Draggable:

    Code:
    Ext.define('Keystone.MyWindow', {
        extend: 'Ext.Panel',
        requires: ['Ext.util.MixedCollection'],
        mixins: {
            draggable: 'Ext.util.Draggable'
        }
    });



    Any chance you could share how to hooked extjs into ruby pipeline with the structure you listed above?

    Thanks,
    -M

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi