Results 1 to 9 of 9

Thread: TEST 7.0 CLASSIC MATERIAL THEME

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    361

    Default TEST 7.0 CLASSIC MATERIAL THEME

    Hello
    I made the easiest program in the world to try the material theme on extjs classic.


    It doesn't work well.
    See image.


    Same program on the fiddle and it works.


    thank you

    Code:
    <!DOCTYPE html><html>
    <head>
    <title></title><meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="logo192.png">
    <link rel="apple-touch-icon" sizes="128x128" href="logo128.png">
    <link rel="stylesheet" type="text/css" rel="stylesheet" href="/ext/ext-7.0.0.116/build/classic/theme-material/resources/theme-material-all.css">
    </head>
    <script type="text/javascript" src="/ext/ext-7.0.0.116/build/ext-all-debug.js"></script>
    <script type="text/javascript" src="/ext/ext-7.0.0.116/build/classic/locale/locale-it.js"></script>
    <script type="text/javascript">
    Ext.application({
        name : 'Fiddle',
        launch : function() {
            Ext.create('Ext.window.Window', {
                title: 'Hello',
                height: 200,
                width: 400,
                layout: 'form',
                items: [{
                    xtype: 'displayfield',
                    fieldLabel: 'Selected Locations',
                    value: '1111111111111111111111'
                }]
            }).show();
        }
    });
    </script>
    </form>
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    306

    Default

    On fiddle it works exactly as it should. Below is something a little more interactive. https://fiddle.sencha.com/#view/editor&fiddle/2ur9

    Ext.application({
    name : 'Fiddle',


    launch : function() {
    Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'form',
    items: [{
    xtype: 'displayfield',
    itemId: 'myDisplayField',
    fieldLabel: 'Selected Locations',
    value: '111'
    },{
    xtype:'button',
    text:'change location',
    handler: function(){
    this.up().down('#myDisplayField').setValue('777');
    }
    }]
    }).show();
    }
    });

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    361

    Default

    Quote Originally Posted by djbushby View Post
    On fiddle it works exactly as it should. Below is something a little more interactive. https://fiddle.sencha.com/#view/editor&fiddle/2ur9

    Ext.application({
    name : 'Fiddle',


    launch : function() {
    Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'form',
    items: [{
    xtype: 'displayfield',
    itemId: 'myDisplayField',
    fieldLabel: 'Selected Locations',
    value: '111'
    },{
    xtype:'button',
    text:'change location',
    handler: function(){
    this.up().down('#myDisplayField').setValue('777');
    }
    }]
    }).show();
    }
    });

    yes in fiddle it works.
    but with the 7.0.0.116 no.
    Obviously on fiddle they have a better version.

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    306

    Default

    I got it working on 7.0.0.116, which I installed today
    Fiddle is 7.0.0.150, which is newer.

    https://docs.sencha.com/extjs/7.0.0/...n_tooling.html


    ext-gen app -a - This generates an application called MyApp
    app.json
    "template": "moderndesktop",
    "toolkit": "modern",
    (The quick generation does not give classic.)

    ext-gen app -i
    would you like to see the defaults for package.json? (y/N)y
    appName: MyExtGenApp
    template: moderndesktop
    modernTheme: theme-material
    Would you like to create a package.json file with defaults? (Y/n)n
    What would you like to name your Ext JS app? (MyExtGenApp)MyApp3
    make a selection from a list
    classicdesktop
    What is the Template folder name? (~/extjs-templates/Application/moderndesktop)
    What is the Template folder name? (~/extjs-templates/Application/moderndesktop) ~/extjs-templates/Application/classic
    desktop
    What would you like to name the npm Package? (my-app-3)my-app-3
    What version is your Ext JS application? (0.0.1)0.0.1
    What is the description? (my-app-3 description for Ext JS app MyApp3) MyApp3 classicdesktop
    What is the GIT repository URL? (https://github.com/)
    What are the npm keywords? (Ext JS Sencha HTML5)
    What is the Author's Name? (Sencha, Inc.)
    What type of License does this project need? (ISC)
    What is the URL to submit bugs? (https://github.com/)
    What is the Home Page URL? (http://www.sencha.com)


    Defaults for Ext JS app:
    appName: MyApp3
    template: classicdesktop
    classicTheme: theme-material


    Defaults for package.json:
    packageName: my-app-3
    version: 0.0.1
    description: MyApp3 classicdesktop
    repositoryURL: https://github.com/
    keywords: "Ext","JS","Sencha","HTML5"
    authorName: Sencha, Inc.
    license: ISC
    bugsURL: https://github.com/
    homepageURL: http://www.sencha.com


    ? Would you like to generate the Ext JS npm project with above config now? (Y/n)y

    app.js
    Ext.application({
    extend: 'MyApp3.Application',
    name: 'MyApp3',




    launch: function(){
    console.log(Ext.getVersion().version);
    Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'form',
    items: [{
    xtype: 'displayfield',
    itemId: 'myDisplayField',
    fieldLabel: 'Selected Locations',
    value: '111'
    },{
    xtype:'button',
    text:'change location',
    handler: function(){
    this.up().down('#myDisplayField').setValue('777');
    }
    }]
    }).show();
    }
    });

    I am using WebStorm with Sencha App Watch pointing to Sencha Cmd v7.0.0.1 (https://sencha.myget.org/feed/early-...windows-64-jre, Mon, 08 Jul 2019 22:18:20 GMT, not on support forum)
    Support forum has
    7.0.0.131, July 23, 2019, but previously I found it was unhappy with the older Sencha Cmd, so Fiddle is a newer version that is unavailable.


    classicdesktop1.PNGclassicdesktop2.PNG

    Your code works, but the app is trying to load the mainview, which was paused with the launch function.


  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    361

    Default

    Quote Originally Posted by djbushby View Post
    I got it working on 7.0.0.116, which I installed today
    Fiddle is 7.0.0.150, which is newer.

    https://docs.sencha.com/extjs/7.0.0/...n_tooling.html


    ext-gen app -a - This generates an application called MyApp
    app.json
    "template": "moderndesktop",
    "toolkit": "modern",
    (The quick generation does not give classic.)

    ext-gen app -i
    would you like to see the defaults for package.json? (y/N)y
    appName: MyExtGenApp
    template: moderndesktop
    modernTheme: theme-material
    Would you like to create a package.json file with defaults? (Y/n)n
    What would you like to name your Ext JS app? (MyExtGenApp)MyApp3
    make a selection from a list
    classicdesktop
    What is the Template folder name? (~/extjs-templates/Application/moderndesktop)
    What is the Template folder name? (~/extjs-templates/Application/moderndesktop) ~/extjs-templates/Application/classic
    desktop
    What would you like to name the npm Package? (my-app-3)my-app-3
    What version is your Ext JS application? (0.0.1)0.0.1
    What is the description? (my-app-3 description for Ext JS app MyApp3) MyApp3 classicdesktop
    What is the GIT repository URL? (https://github.com/)
    What are the npm keywords? (Ext JS Sencha HTML5)
    What is the Author's Name? (Sencha, Inc.)
    What type of License does this project need? (ISC)
    What is the URL to submit bugs? (https://github.com/)
    What is the Home Page URL? (http://www.sencha.com)


    Defaults for Ext JS app:
    appName: MyApp3
    template: classicdesktop
    classicTheme: theme-material


    Defaults for package.json:
    packageName: my-app-3
    version: 0.0.1
    description: MyApp3 classicdesktop
    repositoryURL: https://github.com/
    keywords: "Ext","JS","Sencha","HTML5"
    authorName: Sencha, Inc.
    license: ISC
    bugsURL: https://github.com/
    homepageURL: http://www.sencha.com


    ? Would you like to generate the Ext JS npm project with above config now? (Y/n)y

    app.js
    Ext.application({
    extend: 'MyApp3.Application',
    name: 'MyApp3',




    launch: function(){
    console.log(Ext.getVersion().version);
    Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'form',
    items: [{
    xtype: 'displayfield',
    itemId: 'myDisplayField',
    fieldLabel: 'Selected Locations',
    value: '111'
    },{
    xtype:'button',
    text:'change location',
    handler: function(){
    this.up().down('#myDisplayField').setValue('777');
    }
    }]
    }).show();
    }
    });

    I am using WebStorm with Sencha App Watch pointing to Sencha Cmd v7.0.0.1 (https://sencha.myget.org/feed/early-...windows-64-jre, Mon, 08 Jul 2019 22:18:20 GMT, not on support forum)
    Support forum has
    7.0.0.131, July 23, 2019, but previously I found it was unhappy with the older Sencha Cmd, so Fiddle is a newer version that is unavailable.


    classicdesktop1.PNGclassicdesktop2.PNG

    Your code works, but the app is trying to load the mainview, which was paused with the launch function.


    I just retried the whole sequence:


    Please do not use Sencha Cmd, use the very very old system.


    1) Enter the reserved area https://support.sencha.com/#download


    2) Enter the Nightlies area


    3) Download the latest version of extjs 7. Now there is the 7.0.0.131 (July 23, 2019)


    4) unzip and copy to your server


    5) run the small program above.




    Does not work !!!!
    Are there two different versions in the two different channels?



    I'm sorry for the bad English.
    I'm using google traslator

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2013
    Location
    Australia
    Posts
    306

    Default

    3) Download the latest version of extjs 7. Now there is the 7.0.0.131 (July 23, 2019)

    It does not work as the Sencha CMD has to be newer than extjs 7.
    You can only get Sencha CMD 7 from the Early Access site (https://www.sencha.com/products/extj...e/earlyaccess/)
    You need to use 7.0.0.116 or earlier as the Sencha CMD on the Early Access site is old.

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    361

    Default

    Quote Originally Posted by djbushby View Post
    3) Download the latest version of extjs 7. Now there is the 7.0.0.131 (July 23, 2019)

    It does not work as the Sencha CMD has to be newer than extjs 7.
    You can only get Sencha CMD 7 from the Early Access site (https://www.sencha.com/products/extj...e/earlyaccess/)
    You need to use 7.0.0.116 or earlier as the Sencha CMD on the Early Access site is old.
    Hello.
    I don't use Sencha CMD.
    I do not access npm repository.
    I download the library from the reserved area and I write everything by hand like when Sencha CMD didn't exist yet.
    Very very old way ...

  8. #8
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    137

    Default

    You're getting this error because you are not adding theme's js to your code...

    Code:
    <script type="text/javascript" src="/ext/ext-7.0.0.116/build/classic/theme-material/theme-material.js"></script>
    Include it after you include ext-all-debug.js.

    People suggest you to use Sencha CMD because it helps you include what's needed.

    Furthermore, to check why fiddle works and your copy doesn't, just open developer tools in fiddle and dive down to the fiddle's result frame, you'll get a nice source (you may need to click "pretty print" button in lower left corner of the source file display, or similar depending on the browser you're using).

    Quote Originally Posted by wki01
    Obviously on fiddle they have a better version.
    That's not entirely true, as your sample was missing code. You probably can get the same version (off nightlies) in the support portal. If you're using pure Ext JS I strongly suggest you to get a hang on how to use CMD to build and maintain your application, as that's how Sencha is supporting the product.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  9. #9
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    361

    Default

    Quote Originally Posted by fabricio.object View Post
    You're getting this error because you are not adding theme's js to your code...

    Code:
    <script type="text/javascript" src="/ext/ext-7.0.0.116/build/classic/theme-material/theme-material.js"></script>
    Include it after you include ext-all-debug.js.

    People suggest you to use Sencha CMD because it helps you include what's needed.

    Furthermore, to check why fiddle works and your copy doesn't, just open developer tools in fiddle and dive down to the fiddle's result frame, you'll get a nice source (you may need to click "pretty print" button in lower left corner of the source file display, or similar depending on the browser you're using).



    That's not entirely true, as your sample was missing code. You probably can get the same version (off nightlies) in the support portal. If you're using pure Ext JS I strongly suggest you to get a hang on how to use CMD to build and maintain your application, as that's how Sencha is supporting the product.
    Thanks a lot !!!
    I have written dozens of applications without ever knowing I have to insert that .js


    Unfortunately I can't use Sencha CMD.
    I use extjs within a HCL (ex IBM) domino server.
    No possibility to use external commands.


    Thanks again

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •