---> FAQ

Ask our community for help with v1.x versions of our products.
Post Reply
User avatar
mats
Core Developer
Core Developer
Posts: 14259
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

---> FAQ

Post by mats » Thu Nov 18, 2010 8:49 pm

Below is a summary of frequently asked questions. If you want to help out and add questions/answers to this list, send me a PM and I'll make you a moderator.
  • 1.What's the difference between Ext Scheduler and Ext Gantt?
    The Gantt component is a classic Gantt chart illustrating project tasks and their relationships (dependencies). A row represents a task and each row can only have one task (in the current implementation). The Scheduler is a generic scheduling tool that schedules 'events' for anything that you can call a 'resource'. It doesn't support links between links, but you can have any number of bars per resource. The Gantt and Scheduler share a common subset of code, but are two separate components
  • 1.1 When I try to browse the examples, I get the following error: "Access is denied. ext-base.js". So, It can't load the data into the the Gantt chart. Could please help me to run the examples?
    Run your examples in a web server context, as they use ajax to load the data into the chart.
  • 2. What's the difference between Ext JS and Gxt?
    http://stackoverflow.com/questions/3224 ... re-ext-gwt
  • 3. Can I create my own header with a custom format?
    Yes, see this thread: http://ext-scheduler.com/forum/viewtopi ... rmat#p1801
  • 4. Can I load XML into the chart?
    Yes, see this example and view its source: http://ext-scheduler.com/examples/events/events.html
  • 5. Which files are required to run the Gantt chart
    You need to include a couple of Ext JS includes and then two Gantt chart files (see below).

    JS

    Code: Select all

        <!--Ext lib and UX components-->
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/ext-all-debug.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/examples/ux/LockingGridView.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/examples/ux/Spinner.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/examples/ux/SpinnerField.js"></script>
        
        <!--Gantt components-->
        <script src="../../js/sch-gantt-base.js" type="text/javascript"></script>
        <script src="../../js/sch-gantt-all.js" type="text/javascript"></script>
    CSS

    Code: Select all

        <!--Ext and ux styles -->
        <link type="text/css" rel="stylesheet" href="http://extjs.cachefly.net/ext-3.1.1/resources/css/ext-all.css"/>
        <link href="http://extjs.cachefly.net/ext-3.1.1/examples/ux/css/LockingGridView.css" rel="stylesheet" type="text/css" />
        <link href="http://extjs.cachefly.net/ext-3.1.1/examples/ux/css/Spinner.css" rel="stylesheet" type="text/css" />
        
        <!--Gantt styles-->
        <link href="../../css/sch-gantt-all.css" rel="stylesheet" type="text/css" />
    
  • 6. Which files are required to run the Scheduler
    You need to include a couple of Ext JS includes (LockingGridView if you're using locked columns) and then a single 'all' file for the Scheduler (see below)

    JS

    Code: Select all

        <!--Ext lib and UX components-->
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/ext-all-debug.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/examples/ux/LockingGridView.js"></script>
        
        <!--Gantt components-->
        <script src="../../js/sch-all.js" type="text/javascript"></script>
    
    CSS

    Code: Select all

        <!--Ext and ux styles -->
        <link type="text/css" rel="stylesheet" href="http://extjs.cachefly.net/ext-3.1.1/resources/css/ext-all.css"/>
        <link href="http://extjs.cachefly.net/ext-3.1.1/examples/ux/css/LockingGridView.css" rel="stylesheet" type="text/css" />
        
        <!--Gantt styles-->
        <link href="../../css/sch-all.css" rel="stylesheet" type="text/css" />
    
  • 7. How should the server respond when updating/writing data back to the server?

    First of all you have to configure your reader with an idProperty for JsonReader or idPath for XmlReader. You also have to indicate to the store/reader if the server operation was successful. You do this by configurating a successProperty on your JsonReader or XmlReader. It defaults to 'success'. Meaning a response should look something like this:

    Code: Select all

    { success : true } // All ok!
    
    See the API for more information:
    http://dev.sencha.com/deploy/dev/docs/? ... .XmlReader
    http://dev.sencha.com/deploy/dev/docs/? ... JsonReader

    When creating a new record, your server should respond with a full representation of the new record, including the newly generated (unique) Id.
  • 8. In Ext Gantt, every Task where Start and End date are the same is shown as a Milestone. Is it possible to put something like isMilestone = true/false in our XML-File ? We have Tasks with same Start and Enddate that are no Milestones.

    You can override the Gantt component method isMilestone to provide your own logic, by default it looks like:

    Code: Select all

    isMilestone : function(task) {
        return task.get('EndDate') - task.get('StartDate') === 0;
    },
    
  • 9.Is there a Undo/Redo function available for ext Gantt ?
    Not built in, but you could probably build it yourself.
  • 10. Is it possible to deny editing Task Data or creating Dependencies ? Maybe with extra Parameter in XML like canEdit = true/false ?
    Sure, see the API and check out the events section. Note the events:
    • labeledit_beforestartedit (before a label is edited)
    • beforednd (before a task is dragged)
    • beforeresize (before a task is resized)
    By returning false from these handlers you can stop the operation. Or you can use another approach and simply apply a CSS class called readonly (or whatever you prefer) to identify this as a readonly task. You can then hide the resizehandles and dependency terminals based on this class.

    Code: Select all

    .readonly .x-resizable-handle,
    .readonly .sch-gantt-terminal
    {
        display:none !important;
    }
    
  • 11. Is it possible to show Task's in the past in different colors than Tasks that are in the Future ?
    Sure, just use an eventRenderer function and add a CSS class in the case the task EndDate is less than current date. See APIfor details. Simple example:

    Code: Select all

    eventRenderer : function(task) {
        if (task.get('StartDate') < new Date()) {
                // This task is in the future
                return {
                      cls : 'future-task' // This will be added to the task bar element
                };
         }
    },
    ....
    
  • 12.Is it possible to show images on Task Bar's ? For example if a Task is closed or 100% Done we want to show a closed-icon in the middle of the Bar
    Sure, just use the eventRenderer as described above and add a CSS class (using 'cls' placeholder) and define a style rule with an icon.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply