Dynamically change Scheduler themes

Discuss issues related to v4.x
Post Reply
User avatar
bthomas
Posts: 46
Joined: Wed May 18, 2016 4:45 pm

Dynamically change Scheduler themes

Post by bthomas » Wed May 18, 2016 4:48 pm

Is there any documentation on how to build the app using dynamic themes for the Bryntum Scheduler?

We are using the ExtJS Kitchen Sink example to dynamically switch themes [Neptune, Triton, Aria].

How we setup the application to switch the Scheduler theme as well?

Thanks,
Bijoy

User avatar
bthomas
Posts: 46
Joined: Wed May 18, 2016 4:45 pm

Re: Dynamically change Scheduler themes

Post by bthomas » Wed May 18, 2016 6:37 pm

Will it help to include the CSS specific files for say the triton theme like sch-all-triton.css, sch.event-triton.css into the build profile like so:

Code: Select all

"builds": {
       "triton": {
               "theme": "theme-triton",
               "css": [{
                     "path": "${build.out.css.path}",
                     "bundle": true,
                     "exclude": ["fashion"]
               }, {
                    "path": "/path/to/triton/specific/file.css",
                   "bundle": true
               }]
        }
}
If so, what are the files that need to go into that list? Also, I do not see any CSS files for Aria. Is that a supported theme for the Scheduler?

User avatar
arcady
Core Developer
Core Developer
Posts: 2197
Joined: Wed Mar 20, 2013 6:57 am

Re: Dynamically change Scheduler themes

Post by arcady » Thu May 19, 2016 11:15 am

You can use Sencha Cmd packages shipped w/ the scheduler distro. You just need to require corresponding package:

Code: Select all

    "builds": {
           "triton": {
                   "theme": "theme-triton",
                   "requires": ["bryntum-scheduler-triton"], // scheduler support for triton theme
                   "css": [{
                         "path": "${build.out.css.path}",
                         "bundle": true,
                         "exclude": ["fashion"]
                   }]
            }
    }
Full list of theme support packages is: bryntum-scheduler-classic, bryntum-scheduler-crisp, bryntum-scheduler-neptune, bryntum-scheduler-triton.
Aria theme is not supported yet. There is a ticket for it: https://www.assembla.com/spaces/bryntum/tickets/2816

User avatar
bthomas
Posts: 46
Joined: Wed May 18, 2016 4:45 pm

Re: Dynamically change Scheduler themes

Post by bthomas » Thu May 19, 2016 4:47 pm

Thanks arcady! That works.

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

Re: Dynamically change Scheduler themes

Post by mats » Tue Jun 20, 2017 10:53 am

Aria support will be in the next release (and tomorrow's nightly build)
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
bthomas
Posts: 46
Joined: Wed May 18, 2016 4:45 pm

Re: Dynamically change Scheduler themes

Post by bthomas » Fri Oct 05, 2018 2:13 am

Hello, after upgrading to the latest ExtJS (6.6) and Bryntum (6.0.2) for the aria support, we are noticing a difference in the way the aria theme is rendering the time axis header and background.

I have attached what it looks like in our app vs the kitchen sink example for the aria theme. We are using the Sencha Cmd to build the app and have unzipped the bryntum-scheduler, bryntum-scheduler-theme-aria, bryntum-scheduler-theme-base, bryntum-scheduler-theme-neptune pkg files from the distribution into the packages/local folder and the app.json looks like:

Code: Select all

{
  /**
   * The Sencha Framework for this application: "ext" or "touch".     */
  "framework": "ext",

  /**
   * The toolkit to use. Select either "classic" or "modern".
   */
  "toolkit": "classic",

  "name": "Mvp",

  "requires": ["ux"],

  "language": {
    "js": {
        "input": "ES5",
        "output": "ES5"
    }
  },

  "output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    "page": "index.html",
    "manifest": "${build.id}.json",
    "js": "${build.id}/app.js",
    "appCache": {
      "enable": false
    },
    "resources": {
      "path": "${build.id}/resources",
      "shared": "resources"
    },
    "appCache": {
      "enable": false
    }
  },

  "builds": {
    "neptune": {
      "toolkit": "classic",
      "theme": "theme-neptune",
      "requires": ["bryntum-scheduler", "bryntum-scheduler-theme-neptune", "font-pictos", "font-awesome"]
    },
    "aria": {
      "toolkit" : "classic",
      "theme"   : "theme-aria",
      "requires": ["bryntum-scheduler", "bryntum-scheduler-theme-aria", "font-pictos", "font-awesome"]
    }
  },

  "bootstrap": {
    "base": "${app.dir}",
    "manifest": "${build.id}.json",
    "microloader": "bootstrap.js"
      // "css": "bootstrap.css"
  },

  "css": [{
    // this entry uses an ant variable that is the calculated
    // value of the generated output css file for the app,
    // defined in .sencha/app/defaults.properties
    "path": "${build.out.css.path}",
    "bundle": true,
    "exclude": ["fashion"]
  }, {
    "path": "resources/css/scheduler/sch-all.css"
  }, {
    "path": "resources/css/scheduler/sch-aria-all.css"
  }, {
    "path": "resources/css/scheduler/sch-neptune-all.css"
  }, {
    "path": "resources/css/app.css"
  }, {
    "path": "resources/css/tree.css"
  }, {
    "path": "resources/css/grid.css"
  }, {
    "path": "resources/css/activeTab.css"
  }, {
    "path": "resources/css/schedZoneConfig.css"
  }],
  "resources": [{
    "path": "resources",
    "output": "shared"
  }, {
    "path": "${toolkit.name}/resources"
  }, {
    "path": "${build.id}/resources"
  }],

  "id": "ab91712f-ca3d-455f-9d39-36b068e43912"
}
Are we missing something?
Attachments
kitchensink.png
kitchensink.png (78.51 KiB) Viewed 1106 times
ourapp.png
ourapp.png (70.67 KiB) Viewed 1106 times

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

Re: Dynamically change Scheduler themes

Post by mats » Fri Oct 05, 2018 4:52 pm

Not sure what's going on there. Try to upload a test case ZIP for us that we can investigate?
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
pmiklashevich
Core Developer
Core Developer
Posts: 1902
Joined: Fri Apr 01, 2016 11:08 am

Re: Dynamically change Scheduler themes

Post by pmiklashevich » Fri Oct 05, 2018 6:35 pm

And please start a new thread. Only 1 issue per thread is allowed. Otherwise other users will feel difficulties in searching by our forums. Thank you
Pavel Miklashevich - Core Developer

Post Reply