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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar