SwarmOnline / Ext.ux.TouchCalendar

Sencha Touch Calendar component
113 stars 47 forks source link

Better integration in ST2 project #25

Open tralves opened 11 years ago

tralves commented 11 years ago

Hi,

This is not actually an issue. I think I found a better way to integrate this awesome plugin in my project and wanted to share. Sorry I couldn't find a a better place to post this. Tell me if there is one, and I will post it again.

I didn't like the "Usage" from Readme.md because 1) this way the code would not be packed in app.js and we would loose the great ST2 package system; 2) The css would not be generated with SASS, like the rest of the code.

I integrated this plugin in the following way:

Copied the files to touch/src/ux and renamed them:

Ext.ux.TouchCalendarView.js -> /touch/src/ux/TouchCalendarView.js

Ext.ux.TouchCalendar.js -> /touch/src/ux/TouchCalendar.js

Ext.ux.TouchCalendarSimpleEvents.js -> /touch/src/ux/TouchCalendarSimpleEvents.js

Ext.ux.TouchCalendarEvents.js -> /touch/src/ux/TouchCalendarEvents.js

Copied the .scss to be included in my project

Ext.ux.TouchCalendarView.scss -> /resources/sass/include/_TouchCalendarView.scss

Ext.ux.TouchCalendarEvents.scss -> /resources/sass/include/_TouchCalendarEvents.scss

Ext.ux.TouchCalendarSimpleEvents.scss -> /resources/sass/include/_TouchCalendarSimpleEvents.scss

Used the plugin in my code like this:

In the view:

Ext.define('MyApp.view.Agenda', {
  extend: "Ext.Panel",
  alias: "widget.agenda",
  ctype: 'mainContent',
  requires: ['Ext.ux.TouchCalendarView'],
 initialize: function() {
    var calendarView = {
      xtype : 'calendarview',
      viewMode: 'month',
      weekStart: 1,
      value: new Date(),
      flex: 1,
      height: 400
    };

In app.scss:

@import 'include/_TouchCalendarView';

Thanks! Tiago

trevoriancox commented 10 years ago

Agreed... I had to rename the files and sort out the SCSS myself too.