Creating a custom component

The Sencha Package Manager, included in Sencha Cmd, is a great tool for maintaining and distributing reusable code. This session will teach you how to build a custom component as a package that can be used with the classic as well as the modern toolkit.

This presentation is from SenchaCon 2015 roadshow in Oslo, Copenhagen & Stockholm.

Transcript

1. Creating  a  custom   component Emil  Pennlöv,  Orango AB
2. Summary  “Refine  your  application  with  custom   components”  – why  custom  components ▸ Solve  a  specific  challenge ▸ Development  &  refactoring  in  one  place ▸ Increase  development  speed ▸ Package  and  use  in  other  applications ▸ Easy  to  unit  test
3. Ext.define('ORANGO.RedBox', { extend: 'Ext.Component', alias: 'widget.redbox', style: 'background:red' });
4. Sencha Package  Manager ▸ There  are  two  basic  problems  that  packages  are  designed  to  solve:   consumption  and  distribution We  want  to  be  able  to  easily  include  common  code We  want  to  be  able  to  share  common  code
5. Login  Component
6. Common  code Classic  toolkit Modern  toolkit Ext  JS  6  
7. Workspace ▸ multiple  pages ▸ share  framework ▸ share  code ▸ sencha -­‐sdk ext/ext-­‐6.0.0.640/  generate  workspace myws
8. Creating  a  package ▸ local  package  in  our  workspace   ▸ sencha generate  package loginpanel ▸ modern/src ▸ classic/src
9. App ▸ sencha -­‐sdk ext generate  app  MYAPP myapp ▸ Require  login  in  app.json
10. Code  the  component ▸ classic/src/Login.js ▸ Include  in  the  main  view  for  the  classic  toolkit ▸ modern/src/Login.js ▸ Include  in  the  main  view  for  the  modern  toolkit
11. Live  coding