Question

I’d appreciate help in understanding how to create a TabView. So far I tried adding the following to the main JS file of the application, but I keep getting an error that design is called on “undefined,” i.e. that SC.TabView is undefined.

Todos.DashboardTabs = SC.TabView.design({
    tabLocation: SC.TOP_LOCATION,
    items: [{ title: "Projects", value: Todos.TodoView }],
    nowShowing: Todos.TodoView // A template + view I created
}

Answer 1

My TabView looks like this:

    administrationContentView: SC.TabView.design({
        layout: {
            top: 10,
            bottom: 50,
            left: 10,
            right: 10
        },
        nowShowing: 'EurekaJView.AlertAdministrationView',
        itemTitleKey: 'title',
        itemValueKey: 'value',
        items: [
            {title: 'Alerts', value: 'EurekaJView.AlertAdministrationView'},
            {title: 'Chart Groups', value: 'EurekaJView.InstrumentationGroupsAdministrationView'},
            {title: 'Email Recipients', value: 'EurekaJView.EmailRecipientsAdministrationView'},
            {title: 'Instrumentation Menu', value: 'EurekaJView.TreeMenuAdministrationView'}
        ]

    }),

This is SC 1.6. Full source is available here:

https://github.com/joachimhs/EurekaJ/blob/master/EurekaJ.Manager/src/main/webapp/sc1/js/views/administration/administration_pane.js