Question

这是我的basic.js

Ext.ns('App');

//Ext.Loader.setConfig({enabled: true, disableCaching : true });
//Ext.Loader.setPath('Sch', '../../../ExtScheduler2.x/js/Sch');
//Ext.Loader.setPath('Gnt', '../../js/Gnt');

Ext.require([
    'Gnt.panel.Gantt',
    'Gnt.column.PercentDone',
    'Gnt.column.StartDate',
    'Gnt.column.EndDate',
    'Sch.plugin.TreeCellEditing'
]);

Ext.onReady(function() { App.Gantt.init(); });

App.Gantt = {

    // Initialize application
    init: function (serverCfg) {
        Ext.QuickTips.init();

        var taskStore = Ext.create("Gnt.data.TaskStore", {
            model : 'Gnt.model.Task',
            proxy : {
                type : 'ajax',
                method: 'GET',
                url: 'tasks.xml',
                reader: {
                    type : 'xml',
                    // records will have a 'Task' tag
                    record: "Task",
                    root: "Tasks"
                }
            }
        });

        var dependencyStore = Ext.create("Gnt.data.DependencyStore", {
            autoLoad: true,
            proxy: {
                type : 'ajax',
                url: 'dependencies.xml',
                method: 'GET',
                reader: {
                    type : 'xml',
                    root : 'Links',
                    record: 'Link' // records will have a 'Link' tag
                }
            }
        });


        var colSlider = Ext.create("Ext.slider.Single", {
            width: 120,
            value: 20, // TODO Sch.PresetManager.getPreset('weekAndDayLetter').timeColumnWidth,
            minValue: 20,
            maxValue: 140,
            increment: 10
        });

        var cellEditing = Ext.create('Sch.plugin.TreeCellEditing', {
            clicksToEdit: 1,
            listeners : {
                beforeedit : function() { return !Ext.getCmp('demo-readonlybutton').pressed; }
            }
        });

        var g = Ext.create('Gnt.panel.Gantt', {
            height: 350,
            width: 1000,
            renderTo: Ext.getBody(),
            leftLabelField: 'Name',
            highlightWeekends: true,
            loadMask: true,
            enableProgressBarResize: true,
            enableDependencyDragDrop: true,
            //snapToIncrement : true,
            cascadeChanges : false,
            startDate: new Date(2010, 0, 4),
            endDate: Sch.util.Date.add(new Date(2010, 0, 4), Sch.util.Date.WEEK, 10),
            viewPreset: 'weekAndDayLetter',

            eventRenderer: function (taskRecord) {
                return {
                    ctcls : taskRecord.get('Id') // Add a CSS class to the task element
                };
            },

            tooltipTpl: new Ext.XTemplate(
                '<ul class="taskTip">',
                    '<li><strong>Task:</strong>{Name}</li>',
                    '<li><strong>Start:</strong>{[Ext.Date.format(values.StartDate, "y-m-d")]}</li>',
                    '<li><strong>Duration:</strong> {Duration}d</li>',
                    '<li><strong>Progress:</strong>{PercentDone}%</li>',
                '</ul>'
            ).compile(),


            // Setup your static columns
            columns: [
                {
                    xtype : 'treecolumn',
                    header: 'Tasks',
                    sortable: true,
                    dataIndex: 'Name',
                    width: 200,
                    field: {
                        allowBlank: false
                    }
                },
                Ext.create('Gnt.column.StartDate'),
                Ext.create('Gnt.column.EndDate'),
                Ext.create('Gnt.column.PercentDone')
            ],

            taskStore: taskStore,
            dependencyStore: dependencyStore,
            plugins: [cellEditing],

            tbar: [
                {
                    text: 'Add new task...',
                    iconCls: 'icon-add',
                    handler: function () {
                        var newTask = new taskStore.model({
                                Name: 'New task',
                                leaf : true,
                                PercentDone: 0
                            });
                        taskStore.getRootNode().appendChild(newTask);
                    }
                },
                {
                    enableToggle: true,
                    id : 'demo-readonlybutton',
                    text: 'Read only mode',
                    pressed: false,
                    handler: function () {
                        g.setReadOnly(this.pressed);
                    }
                },
                '->',
                {
                    xtype: 'label',
                    text: 'Column Width'
                },
                ' ',
                colSlider
            ]
        });

        colSlider.on({
            change: function (s, v) {
                g.setTimeColumnWidth(v, true);
            },
            changecomplete: function (s, v) {
                g.setTimeColumnWidth(v);
            }
        });
    }
};

在我的html文件中，我已经包含了basic.js

我想从basic.js访问 var taskStore ，但是很难。

我试过这样做：

var test = App.Gantt.taskStore;
var test = taskStore;

他们没有工作。

Answer 1

最简单，最丑陋的方法是将其分配给window：window.taskStore = taskStore。然后任何文件都可以访问此变量。更好的方法是花点时间考虑一下JS应用程序的设计，并考虑Brian的建议。谁应该了解taskStore等...

Answer 2

使用var表示它是一个私有变量，无法在App.Gantt之外访问。相反，请尝试使用this.taskStore = ...设置它，将其设置为App.Gantt的成员变量，并使其可公开访问。

从其他文件访问Ext Gantt JS变量

2 个答案: