Results 1 to 6 of 6

Thread: ExtJS - How to convet HTML+ExtJS to ExtJS only

  1. #1
    Sencha User
    Join Date
    Dec 2016
    Posts
    31
    Answers
    1

    Default ExtJS - How to convet HTML+ExtJS to ExtJS only

    My application uses ExtJS inside a HTML:

    Code:
    <html><head>
        <meta http-equiv="cache-control" content="no-cache">
        <meta name="robots" content="none">
    </head>
    <body>
    <script type="text/javascript">        
    Ext.onReady(function() {
        
    
    
        Ext.util.Format.thousandSeparator = '.'; 
        Ext.util.Format.decimalSeparator = ',';
    
    
        var storeBills = Ext.create('Ext.data.Store', {
            autoLoad: false
            , autodestroy: true
            , fields: [
                {name: 'codigo', type: 'int'}
                , {name: 'numero', type: 'int'}
                , {name: 'cliente', type: 'string'}
            ]
            , pageSize: 100
            , sorters: [
                {
                    property: 'codigo'
                    , direction: 'DESC'
                }
            ]
            , proxy: {
                type: 'ajax'
                , url: 'ajax/bills.php'
                , reader: {
                    type: 'json'
                    , root: 'items'
                    , totalProperty: 'total'
                }
            }
        });
        
        storeBills.load();
      
        var gridBills = new Ext.create('Ext.grid.Panel', {
            title: translations.Listagem
            , store: storeBills
            , loadMask: false
            , height: Ext.getCmp('mainpanel').getHeight() - 115
            , emptyText: translations.Nenhum_registro
            
            , viewConfig: {
                trackOver: false
                , stripeRows: true
                , enableTextSelection: true
                , getRowClass: function(record, index) {
                    if (record.get('status') == 0) {
                        return 'verde';
                    } 
                }
            }
            , columns: [
                {
                    header: translations.Codigo
                    , dataIndex: 'codigo'
                    , width: 75
                }
                , {
                    header: translations.Cliente
                    , dataIndex: 'cliente'
                    , align: 'left'
                    , width: 300
                }
            ]
        });
        
        var painelResultadosBills = Ext.create('Ext.panel.Panel', {
            layout: {
                type: 'vbox' 
                , align: 'stretch'
                , padding: 0
            }
            , items: [
                gridBills
            ]
            , renderTo: 'bills'
        });   
    
    
    });
    </script>
    <div id="bills"></div>
    </body>
    </html>
    I would like to use only ExtJS and remove HTML.
    How can I do that?
    Everthing runs inside a app.js

    Thanks

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Have you tried it? I think most browsers will display the text of a javascript file (rather than executing the code) if you point at it directly. The HTML file tells the browser how to handle it. Can I ask why you want to remove the HTML part?

  3. #3
    Sencha User
    Join Date
    Dec 2016
    Posts
    31
    Answers
    1

    Default

    Thanks for your answer Gary!

    But I would to convert to something like, because I call this js from app.js.

    Ext.define(App.view.cadastros.Bills, {

    extend: 'Ext.grid.Panel'

    , xtype: 'billsGrid'

    , controller: 'billsgrid'

    , init: function() {

    }


    But I don´t where I can put the variables (var), because I like to work with:
    var painelResultadosBills = Ext.create('Ext.panel.Panel'

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I don't think I'm following. Are you looking to move the code out of your index.html file into app.js (and other JS files)?

    Which specific version of Ext JS are you using? Are you using Sencha Cmd?

  5. #5
    Sencha User
    Join Date
    Dec 2016
    Posts
    31
    Answers
    1

    Default

    Yes, I have a lot of files where the ExtJS code is inside HTML like the example abova. I want to leave only ExtJS, ou pute ExtJS. I am using ExtJS 6.2 and secnah cmd.

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    This architecture guide provides a great deal of information.
    http://docs.sencha.com/extjs/6.2.1/g...hitecture.html

    I recommend creating a new application with Cmd and migrating your code into it. You might run through the theming guide to create a test application which you can use to see where to place your code.
    http://docs.sencha.com/extjs/6.2.1/g...s/theming.html

Similar Threads

  1. How to get html tag id using Extjs
    By ajit.mankottil in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 7 Jul 2015, 11:55 AM
  2. Replies: 3
    Last Post: 29 Jan 2013, 10:49 AM
  3. Data exchange between 2 Files: PHP -> ExtJs or ExtJs -> ExtJs
    By isicom in forum Community Discussion
    Replies: 2
    Last Post: 20 Aug 2011, 9:03 PM
  4. Replies: 2
    Last Post: 24 Apr 2011, 12:28 PM
  5. ExtJS imp: Update existing HTML forms or rewrite as ExtJS forms?
    By extJsnOOb in forum Community Discussion
    Replies: 0
    Last Post: 25 Jul 2008, 1:50 AM

Tags for this Thread

Posting Permissions

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