Page 1 of 1

Dynamically change Scheduler themes

Posted: Wed May 18, 2016 4:48 pm
by bthomas
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

Re: Dynamically change Scheduler themes

Posted: Wed May 18, 2016 6:37 pm
by bthomas
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?

Re: Dynamically change Scheduler themes

Posted: Thu May 19, 2016 11:15 am
by arcady
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

Re: Dynamically change Scheduler themes

Posted: Thu May 19, 2016 4:47 pm
by bthomas
Thanks arcady! That works.

Re: Dynamically change Scheduler themes

Posted: Tue Jun 20, 2017 10:53 am
by mats
Aria support will be in the next release (and tomorrow's nightly build)

Re: Dynamically change Scheduler themes

Posted: Fri Oct 05, 2018 2:13 am
by bthomas
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?

Re: Dynamically change Scheduler themes

Posted: Fri Oct 05, 2018 4:52 pm
by mats
Not sure what's going on there. Try to upload a test case ZIP for us that we can investigate?

Re: Dynamically change Scheduler themes

Posted: Fri Oct 05, 2018 6:35 pm
by pmiklashevich
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