1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default wip install jsbuider for mvc and scss

    wip install jsbuider for mvc and scss


    Hello,

    this morning i try to explain the install and use for mvc and scss. (before i made some test without result)
    here i explain (i hope your understand my poor english) what i do, my problem and solution. But i'm newby, so if a made or say wrong things help me.
    thanks

    ok let's go

    1- download sencha 1.0.1a
    2- dezip the folder
    ok simple :-)
    so i have this hierarchy

    sencha (folder)
    |____SDK1.0.1a (folder)
    |____docs (folder)
    |____exemples (folder)
    |____jsbuilder (folder)
    |____src (folder)
    |____sencha-touch-debug.js (file)
    |____sencha-touch.js (file)
    |____sencha-touch.jsb3 (file) ( i don't no what it s , beta3?)
    3- open terminal (on osx)
    go to my root folder of jsbuilder
    Code:
    cd sencha/SDK1.0.1a/jsbuilder
    4- create app
    Code:
     ./sencha.sh generate app NameOfMyApp ../../NameOfMyApp
    now i have this hierarchy
    sencha (folder)
    |____SDK1.0.1a (folder)
    |____ NameOfMyApp (folder)
    I open index.html in NameOfMyApp(folder) in safari
    Oups problem :
    Code:
    ext-touch.cssFailed to load resource: L’URL demandée est introuvable sur ce serveur.
    ext-touch-debug.jsFailed to load resource: L’URL demandée est introuvable sur ce serveur.
    mvc.jsFailed to load resource: L’URL demandée est introuvable sur ce serveur.
    routes.js:12ReferenceError: Can't find variable: Ext
    app.js:6ReferenceError: Can't find variable: Ext
    Viewport.js:8ReferenceError: Can't find variable: Test01
    ok i found pb and be back

    ps: i click preview but i create thread , please delete the 2 others thanks and sorry

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    1- copy sencha-touch.css SDK1.0.1a/resources/css/ to NameOfMyApp/lib/touch/resources/css (create folders touch/resources/css)
    2- copy pkgs folder SDK1.0.1a/pkgs to NameOfMyApp/lib/touch/pkgs

    3- change this line in index.html
    Code:
    <link rel="stylesheet" href="lib/touch/resources/css/ext-touch.css" type="text/css">
    to
    <link rel="stylesheet" href="lib/touch/resources/css/sencha-touch.css" type="text/css">
    
    <script type="text/javascript" src="lib/touch/ext-touch-debug.js"></script>
    to
    <script type="text/javascript" src="lib/touch/sencha-touch-debug.js"></script>
    now open index.html in safari
    oups pb :
    Code:
    Error: Ext.List: itemTpl is a required configuration.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    open Viewport.js in view and change
    line 36 tpl in itemTpl

    open index.html in safari .

    OK it works
    next how create model , views and controler

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    for the next my NameOfMyApp is Test01

    in app.js :
    add useHistory : true
    and change launch (why add application:this i don't now)
    Code:
    Test01 = new Ext.Application({
        defaultTarget: "viewport",
        defaultUrl : "Test01/index",
        name: "Test01",
        useHistory : true,
    	
        launch: function() {
            this.viewport = new Test01.Viewport({
    			application :this
    		});
        }
    });
    defaultUrl : now if you open index.html in safari the default is index.html#Test01/index

    in viewport.js delete all after fullscreen
    Code:
    Test01.Viewport = Ext.extend(Ext.Panel, {
        id        : 'viewport',
        layout    : 'card',
        fullscreen: true 
    });
    create a model we name it , dataModel
    1- open terminal
    2- go to Test01 folder
    cd .. (go to folder above)
    cd Test01
    3 -
    Code:
    ./sencha.sh generate model dataModel id:int name:string
    oups error :
    Creating file: app/models/dataModel.js
    FileStream: No such file or directory
    Stream:"Could not open the stream" (src/generators/model/templates/Model.js)

    to do this good (i don't no if it's good but it works)
    copy this folder to your root app
    bin
    jsdb
    src
    tests
    ycompressor

    normaly you have this hierarchy
    |__app
    |__bin
    |__index.html
    |__jsbuilder
    |__jsdb
    |__lib
    |__public
    |__sencha.sh
    |__src
    |__test
    |__tests
    |__ycompressor

    in terminal
    ./sencha.sh generate model dataModel id:int nametring
    now in app>models>dataModel.js is create
    open it
    you have a currious things
    Code:
    Ext.generator.Model.templates.Model = new Ext.XTemplate(
        'Ext.regModel("dataModel", {
    ',
        '    fields: [
    ',
        '',
        '        {name: "id", type: "int"},
    ',
        '',
        '        {name: "name", type: "string"}
    ',
        '',
        '    ]
    ',
        '});'
    );
    transform into
    Code:
     Ext.regModel("dataModel", {
         fields: [ 
            {name: "id", type: "int"}, 
        	{name: "name", type: "string"}
      		]
    });

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    create a controler
    Code:
    ./sencha.sh generate controller Contact index show compose create
    open contact.js in controller folder
    Code:
    Ext.generator.Controller.templates.Controller = new Ext.XTemplate(
        'Ext.regController("Contact", {
    ',
        '',
        '    index: function() {
    ',
        '        
    ',
        '    },
    
    ',
        '',
        '    show: function() {
    ',
        '        
    ',
        '    },
    
    ',
        '',
        '    compose: function() {
    ',
        '        
    ',
        '    },
    
    ',
        '',
        '    create: function() {
    ',
        '        
    ',
        '    }',
        '',    
        '
    });
    '
    );
    change in
    Code:
    Ext.regController("Contact", {
       index: function() {
      },
      show: function() {
     },
     compose: function() {
     },
     create: function() {
     	}
    });
    to make it work we have to change in app.js defaultUrl because i have name my controler Contact and not test01
    so it s : defaultUrl : "Contact/index",

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Posts
    51
    Vote Rating
    0
    tonin10 is on a distinguished road

      0  

    Default


    last step , scss
    to use it simply , change viewport.js
    Code:
    Test01.Viewport = Ext.extend(Ext.Panel, {
        id        : 'viewport',
        layout    : 'card',
        fullscreen: true ,
    	initComponent: function() {
            Ext.apply(this, {
                dockedItems: [
                    {
                       xtype:'toolbar',
    					dock:'top',
    					title:'Contacts'
                    }
                ]
            });
    
            Test01.Viewport.superclass.initComponent.apply(this, arguments);
        }
    });
    now we have a toolbar to transform.

    FIRST INSTALL COMPASS
    http://www.sencha.com/blog/getting-sassy-with-css

    1- copy this folders :
    sdk1.0.1a > resources >sass
    sdk1.0.1a > resources >themes
    to
    test01> lib >touch > resources
    2- open the file sencha-touch.scss in this folder
    3- on first line copy this
    Code:
    $base-color : #FF0000;
    save
    4- open terminal
    Code:
    compass compile lib/touch/resources/sass/
    5/ open index.html whoaa great red :-)

    if you search where is variable for change look
    lib > resources > theme > stylesheets >sencha-touch > default
    you will find what you want in these files

    i have finish, the video on vimeo help me a full( structuring sencha app)

    but there is strange things like '' and when your create model

    perhaps for lot of a you i open doors already open but for beginner i think it's help

    if your have suggest, go :-)

Similar Threads

  1. Sencha Touch MVC framework and SCSS integration guides
    By lexer in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 5 Apr 2011, 10:53 PM
  2. [EXPLAIN] ExtJS 4 scss
    By prologic in forum Ext 3.x: Bugs
    Replies: 7
    Last Post: 26 Feb 2011, 2:22 PM
  3. Replies: 1
    Last Post: 24 Feb 2011, 9:57 PM
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