Category Archives: Ext JS 6

Turn an Ext JS 6 Segmented Button into an Activity Timeline with CSS

My Ext JS 6/Java project for the National Institutes of Standards (NIST) requires an “activity path” indicator. No such widget exists directly in Ext, so I created a CSS override to the ExtJS segmented button in order to give me what I needed. Ultimately I’ll make this more robust by converting it over to Sass and using Ext JS Sass variables, but the raw overrides are presented here for your consideration.

Ext JS button definition:

 {
   xtype: 'segmentedbutton',
   cls: 'timeline',
   height: 40,
   items: [
     {
       text: 'Step 1'
     },
     {
       text: 'Step 2'
     },
     {
       text: 'Step 3'
     }
   ]
}

CSS overrides:

<style>

    /* white right-facing triangle */
    .timeline .x-segmented-button-item-horizontal:before {
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    left: 2px;
	    top: 0px;
	    border-style: solid;
	    border-width: 19px 0 19px 19px;
	    border-color: transparent transparent transparent #fff;
	    z-index: 0;
	}

	.timeline .x-btn-default-small {
		border: 0px !important;
	}

	/* overlay right-facing triangle of standard button color, leaving
	edges of white right-facing triangle */
    .timeline .x-segmented-button-item-horizontal:after {
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    left: 0px;
	    top: 0px;
	    border-style: solid;
	    border-width: 19px 0 19px 19px;
	    border-color: transparent transparent transparent #5fa2dd;
	    z-index: 10;
	}

	/* white arrow overlay to left of first button */
	.timeline .x-segmented-button-item-horizontal:first-child:after {
		 border-color: transparent transparent transparent white;
	}

	.timeline .x-segmented-button-item-horizontal:first-child:after, .timeline .x-segmented-button-item-horizontal.x-btn-pressed:first-child:after {
		 border-color: transparent transparent transparent white !important;
	}

	.timelinebutton.x-btn-pressed:after {
	    border-left-color: #477aa6;
	}

 	.timeline .x-segmented-button-item-horizontal.x-btn-pressed + .x-segmented-button-item-horizontal:after {
 		border-color: transparent transparent transparent #477aa6;
 	}

 	.timeline .x-segmented-button-item-horizontal.x-btn-pressed:after {
 		border-color: transparent transparent transparent #5fa2dd;
 	}

 	/* eliminate right edge border that Ext JS puts into place. */
 	.timeline .x-btn-focus.x-btn-pressed {
 		box-shadow: none !important;
 	}

 	/* set hover of triangle to standard hover color of button */
 	.timeline .x-btn-over + .x-segmented-button-item-horizontal:after {
 		border-color: transparent transparent transparent #5795cb;
 	}
</style>

Integrating Ext JS 6, Sencha Architect 4, and TinyMCE

Note: This is a follow-up to my post from 2014
(https://druckit.wordpress.com/2014/03/30/integrating-ext-js-4-and-the-tinymce-4-rich-text-wysiwyg-editor/)

I’ve re-packaged and enhanced the plugin as a Sencha Architect Extension (.aux) file.

New features include:

  • Ext JS 5.x/6.x compatibility
  • Sencha Architect 4.x compatibility
  • The TinyMCE editor now appears directly within the design canvas of Sencha Architect
  • Added support for new TinyMCE4 features (including the Premium Spell Checker plugin)
  • Added support to use smaller buttons in the TinyMCE editor.

screenshot

By default, the editor will pull from the TinyMCE Cloud. See the usage notes in the README.md file for install instructions.

You can download the extension from my repo here:
https://github.com/sdruckerfig/SenchaArchitectExt6TinyMCE

Enjoy!