Creating a custom timeline view

Ask our community for help with v1.x versions of our products.
User avatar
techalengalo
Posts: 39
Joined: Mon Nov 01, 2010 12:16 am

Creating a custom timeline view

Post by techalengalo » Mon Nov 08, 2010 3:31 am

Hi,
I require to create a custom time line view. I dont want to use the types provided by Ext Scheduler currently like hour,hourAndDay, Day etc. I wanted to check if there are any available examples which can guide me to achieve that. I was looking into the http://www.ext-scheduler.com/examples/p ... mance.html but did not find it that informative. Here the bars are getting customized not the time view. I was looking for something similar what Cliff had posted in this forum y topic "I shrunk my timeline". Seems there is some plugin which helps in creation of timeline view. Please suggest me if there is one and guide me to any example if there is one so that i can customize it based on my requirement.

User avatar
mats
Core Developer
Core Developer
Posts: 14658
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Creating a custom timeline view

Post by mats » Mon Nov 08, 2010 10:34 am

The performance example is what you should look at, it uses a custom "second" header which is not included in the Scheduler source. View the JS source of the examples, that's where you'll find the informative stuff.

http://www.ext-scheduler.com/examples/p ... ormance.js

Relevant code is at the bottom of the file:

Code: Select all

// Custom column configuration for seconds
(function() {
    var colF = Sch.ColumnFactory;

    Ext.apply(colF.headerRenderers, {
        second : function(start, end, cfg) {
            cfg.header = start.format('m:i:s');
        }
    });

    Ext.apply(colF.columnConstructors, {
        second : function(startDate, endDate, defaults) {
            startDate = startDate.clone();
            startDate.setMilliseconds(0);     // Floor value
            endDate = endDate.clone();
            endDate.setMilliseconds(1000);    // Ceil value

            var cols = this.createColumnsInternal(startDate, endDate, Date.SECOND, this.headerRenderers.second, defaults);
            
            return {
                columns : cols
            };
        }
    });
})();

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

User avatar
techalengalo
Posts: 39
Joined: Mon Nov 01, 2010 12:16 am

Re: Creating a custom timeline view

Post by techalengalo » Tue Nov 09, 2010 5:53 am

The code presented customizes the format of the date , but my main objective is to get a time scale view somewhat like a scale having ticks in between the hours.That is achievable using plane HTML and javascript but I was just wondering how could we leverage the ColumnFactory to achieve it so that we have the scale inside the scheduler panel header in event store.

User avatar
mats
Core Developer
Core Developer
Posts: 14658
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Creating a custom timeline view

Post by mats » Tue Nov 09, 2010 11:19 am

The content of the header is just plain HTML as you say, so you could use the code I posted to create ticks like this:

See updated live example: http://www.ext-scheduler.com/examples/p ... mance.html

Code: Select all

// Custom column configuration for seconds
(function() {
    var colF = Sch.ColumnFactory;

    Ext.apply(colF.headerRenderers, {
        second : function(start, end, cfg) {
            cfg.headerCls += 'ticks-header';
            cfg.header = String.format('<div class="ticks-outer">&nbsp;<div class="ticks-inner">&nbsp;</div></div>{0}', start.format('m:i:s'));
        }
    });

    Ext.apply(colF.columnConstructors, {
        second : function(startDate, endDate, defaults) {
            startDate = startDate.clone();
            startDate.setMilliseconds(0);     // Floor value
            endDate = endDate.clone();
            endDate.setMilliseconds(1000);    // Ceil value

            var cols = this.createColumnsInternal(startDate, endDate, Date.SECOND, this.headerRenderers.second, defaults);
            
            return {
                columns : cols
            };
        }
    });
})();


Along with some simple CSS

Code: Select all

.sch-schedulerpanel .sch-timeheader .x-grid3-hd-inner {
    padding: 0 3px 8px 5px;
}

.ticks-outer
{
    position:absolute;
    width:50%;
    height:60%;
    left:25%;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    top:10px;
}

.ticks-inner
{
    position:absolute;
    overflow:visible;
    border-left:1px solid #ccc;
    height:85%;
    left:50%;
    top:5px;
}

.ticks-header
{
    position:relative;
}

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

User avatar
techalengalo
Posts: 39
Joined: Mon Nov 01, 2010 12:16 am

Re: Creating a custom timeline view

Post by techalengalo » Tue Nov 09, 2010 5:19 pm

Thanks Matt !! This really helped. I further made minor changes to it to suffice it to my requirement. :)

User avatar
techalengalo
Posts: 39
Joined: Mon Nov 01, 2010 12:16 am

Re: Creating a custom timeline view

Post by techalengalo » Thu Nov 11, 2010 6:50 pm

Hi Matt,
Is it possible to add any icon on left and right of time scale? It would be something like this :

<Icon1 > <Time Scale> <Icon 2>

I would also add handlers to these icons to control the dates on time scale.

User avatar
mats
Core Developer
Core Developer
Posts: 14658
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Creating a custom timeline view

Post by mats » Thu Nov 11, 2010 7:29 pm

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

User avatar
techalengalo
Posts: 39
Joined: Mon Nov 01, 2010 12:16 am

Re: Creating a custom timeline view

Post by techalengalo » Sun Nov 14, 2010 9:00 pm

Thanks Matt ! This works. I was trying to put this time scale a level above. It would be this way

<Blank Space> <Img1> <TimeScale> <Img2>
<Resource Store> <Blank Space>

Right now it is as
<Resource Store> <Img1> <TimeScale> <Img2>


I guess this is achievable using Row Constructors. I tried that, but the timescale column which has been custom created always takes the precedence and comes below.

User avatar
mats
Core Developer
Core Developer
Posts: 14658
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Creating a custom timeline view

Post by mats » Sun Nov 14, 2010 9:22 pm

Whats not working?
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

User avatar
mats
Core Developer
Core Developer
Posts: 14658
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Creating a custom timeline view

Post by mats » Sun Nov 14, 2010 9:24 pm

Whats not working?
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