Ext JS Gannt在任务之间添加链接

时间:2012-07-02 14:03:57

标签: javascript extjs gantt-chart

添加XML链接,但我想使用JS变量:

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
            }
        }
    });

dependancies.xml

<Links>
    <Link>
        <From>3</From>
        <To>4</To>
        <Type>2</Type>
    </Link>
</Links>

现在这是新代码,带有新的依赖存储和JS变量:

我的依赖商店实例目前看起来像这样:

var dependencyStore = Ext.create("Gnt.data.DependencyStore", {
            autoLoad    : true,
            proxy       : {
            type    : 'memory',
            reader  : {
                type: 'json'
            },

            data: [ assign ]
        }           
});

我的assign变量看起来像这样

var assign = [{
    "From" : 3,
    "To" : 4,
    "Type" : 2
}
]

问题在于,就是没有创建链接。

编辑:整个文件

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', {
        autoLoad    : true,
        proxy       : {
            type    : 'memory',
            reader  : {
                type: 'json'
            },

            data: [ data
            ]
            // eof data
        }
        // eof proxy
    });

        var dependencyStore = Ext.create("Gnt.data.DependencyStore", {
             autoLoad    : true,
        proxy       : {
            type    : 'memory',
            reader  : {
                type: 'json'
            },
            data: [ assign ]
        }
    });



        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: 1300,
            renderTo: Ext.getBody(),

            highlightWeekends: true,
            loadMask: true,
            enableProgressBarResize: true,
            enableDependencyDragDrop: true,
            //snapToIncrement : true,
            cascadeChanges : false,
            startDate: new Date(2012, 5, 21),
            endDate: new Date(2012, 7, 17),
            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 H:i")]}</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: [

                {
                    enableToggle: true,
                    id : 'demo-readonlybutton',
                    text: 'Read only mode',
                    pressed: true,
                    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);
            }
        });
    }
};

1 个答案:

答案 0 :(得分:0)

当我有

data: [ assign ] 

在我的js文件中,我的 assign 变量中没有[ ]个标签。

所以而不是

var assign = [{
"From" : 3,
"To" : 4,
"Type" : 2

} ]

使用

var assign = {
"From" : 3,
"To" : 4,
"Type" : 2 }