CODEWITHSUNDEEP
javascripthtmlextjsextjs4
John Walker
John Walker

Reputation: 1121

ExtJS Tab Panel Loader can't load the html page's javascript

index.html

<script type="text/javascript" src="resources/js/ext-all.js?"></script>
 <script type="text/javascript" src="resources/js/tabs-adv.js?"></script>

tabs-adv.js
create a tab panel then load the vehicle.html with loader

        ....

        var tabs = Ext.widget('tabpanel', {
        renderTo: 'tabs',
        id : 'tabspanel',
        cls : 'MainPanel',
        resizeTabs: true,
        enableTabScroll: true,
        width: window.innerwidth,
        height: window.innerHeight - 30, //30 because menu height is 30px
    tabBar: {
        layout: { pack: 'center' }
    },
        defaults: {
            autoScroll: false, //close the tab scrolling
            bodyPadding: 0 //must 0,not margin at all
        },
        items: [
        {
            closable: false,
            //html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
             loader: {
                autoLoad:true,
                url :'vehicle/vehicle.html'
            },
            iconCls: 'bus32',
            title: 'Vehicle Manage'
        }]
})

vehicle.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ext includes -->
    <script type="text/javascript" src="vehicle.js?<?php echo time(); ?>"></script>
<title>Untitled Document</title>
</head>

<body>
aa
<div id="toolbar"></div>
</body>

Unfortunately Loader didn't load the vehicle.js
loader only load the html content, but not included vehicle.html javascript.
any way to solve this problem?

p/s: i m facing this problem EXT JS failed to load multi pages at the same time , both tabs are load at the same time with the ext-all.js will cause the application error, i have to try to use loader to prevent this happen,
I have tried, if the tabs are loaded with different ext-all.js will not be occured error, example first tab load ext-all.js, second tabs will load ext-all1.js 3th tab will load ext-all2.js.

UPDATE

vehicle.js and driver.js also having the grid panel

vehicle.js

    Ext.define('MyApp.view.MyVehicleGridPanel', {
    id:'mygridpanel',
    extend: 'Ext.grid.Panel',
    renderTo: Ext.getBody(),
    width:  window.innerWidth,
    header: false,
    height: window.innerHeight,
    store: UserStore,
    multiSelect: false,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: '_id',

                    text: 'Vehicle ID'
                },
                {
                    xtype: 'gridcolumn',
                    width: 126,
                    dataIndex: 'Plat_No',
                    text: 'Plat Number'
                },
                {
                    xtype: 'gridcolumn',
                    width: 200,
                    dataIndex: 'Name',
                    text: 'Added By'
                }
            ],listeners: {
                            itemclick: function(dv, record, item, index, e) {

                                    if (record.get('_id') > 0){
                                        Ext.getCmp('BtnEdit').enable();
                                        Ext.getCmp('BtnDelete').enable();
                                    }else{
                                        Ext.getCmp('BtnEdit').disable();
                                        Ext.getCmp('BtnDelete').disable();
                                    };                                       
                            }},
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            cls: '',
                            width: 65,
                            id : 'BtnAdd',
                            icon: '',
                            iconCls: 'add',
                            text: 'Add'
                        },
                        {
                            xtype: 'button',
                            cls: '',
                            id : 'BtnEdit',
                            width: 65,
                            icon: '',
                            iconCls: 'edit',
                            disabled: true,
                            text: 'Edit'
                        },
                        {
                            xtype: 'button',
                            cls: '',
                            id : 'BtnDelete',
                            width: 65,
                            icon: '',
                            iconCls: 'delete',
                            disabled: true,
                            text: 'Delete'
                        },
                        {
                            xtype: 'button',
                            cls: '',
                            id : 'BtnRefresh',
                            width: 65,
                            icon: '',
                            iconCls: 'refresh',
                            text: 'Refresh'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

}); 
var gridwin = Ext.create('MyApp.view.MyVehicleGridPanel');

Upvotes: 2

Views: 4185

Answers (2)

Martin Zeitler
Martin Zeitler

Reputation: 76749

It's definitely possible to mix up ExtJS with static pages - rather suitable for print previews or alike.

A secondary DOM needs to be created within an iFrame, which will cause the JS on page to execute - because it circumvents the ExtJS Loader completely - and therefore scripts will be properly parsed.

Here's an example, proven to be working (reduced to the least required):

items : [{
    xtype: 'component',
    autoEl: {tag: 'iframe', src: ''}
}],
listeners: {
    boxready: function(){
        this.items.items[0].el.dom.src='vehicle.html';
    }
}

The listener for boxready causes some delay in execution (which was required for what I did).

When reading other answers, I'd comment: How about thinking out of the box, once?

... which even literally applies in this particular case :)

One simply has to know the rules in order to break them - the other way around won't work.

Upvotes: 0

Lorenz Meyer
Lorenz Meyer

Reputation: 19915

The loader is not supposed to load your javascript. With extjs, you should have only one javascript file. Use events to execute javascript code while rendering your panels, especially use the render event.

  1. Put your vehicle.js in your main .js file and remove the last line. This one goes into the event listener.

  2. Change your tab item using an event handler

    items: [{
    closable: false,
    loader: {
        autoLoad:true,
        url :'vehicle/vehicle.html'
    },
    iconCls: 'bus32',
    title: 'Vehicle Manage',
    listeners: {
        render: function(){gridwin = Ext.create('MyApp.view.MyVehicleGridPanel')}
    }
}]

General remark 1: Do your homework and read the documentation. Stick to the recommended way. Why are you trying to work in such a convoluted way ? It shows that you didn't take the time to read and apply the basics.

General remark 2: You should concatenate all your .js sources in the production environment. The best thing is to use sencha cmd. You have to create an empty app, an then copy all your project into that empty app.

Upvotes: 1

Related Questions