How to create sencha plugin
sencha
tomoyukikashiro
Purpose
understand how to create sencha touch plugin
Agenda
- Preparation to develop
- Development
- Build application
- Publishment
Preparation to develop
- Create new application
- Make ux.touch directory
- Add class path to Ext.loader
In this article, explain it by using my plugin. sencha-list-scroll-reset
Create new application
mkdir sencha-list-scroll-reset
sencha -sdk ./sdk-2.1.0 generate app SenchaListScrollReset ./
Make ux.touch directory
make ${APP_DIR}/ux/touch to deploy plugin you create
mkdir -p sencha-list-scroll-reset/ux/touch
* there are some pattern to deploy plugin ux or ux.touch or tux
Add class path to Ext.loader
$ vi sencha-list-scroll-rese/app.js
Ext.Loader.setPath({
'Ext': 'touch/src',
'Ext.ux.touch': './ux/touch', // add class path
'SenchaListScrollReset': 'app'
});
Development
outline of plugin
Ext.define('Ext.ux.touch.ListScrollReset', {
requires: [
],
alias: 'plugin.listscrollreset',
config: {
},
constructor: function(config) {
this.initConfig(config);
},
init: function (component) {
},
hoge: function(){
}
});
set alias
You have to set alias as plugin.XXXX
Ext.define('Ext.ux.touch.ListScrollReset', {
requires: [
],
alias: 'plugin.listscrollreset',
Plugin is created to inherit Ext.plugin.Plugin by setting plugin.XXX alias
refer to Ext.Component.applyplugins
Logic
parameter (component) is passed init function is reference to component which is include that plugin
init: function (component) {
// componentが読み込んだコンポーネント
}
Include plugin
include plugin to set plugin.xclass propetry in component configuration which you want set plugin to.
config {
plugins: [
{
xclass: 'Ext.ux.touch.ListScrollReset',
toolbarItemId : 'main-toolbar',
listItemId: 'main-list',
scrollAnim: {duration: 5000}
}
Build
- set class path to build command
- build!!
Attention
If you excute build command without setting class path following error occur.
Failed to find file for Ext.ux.touch.ListScrollReset
Set class path to build command
cd sencha-list-scroll-reset
vi .sencha/app/sencha.cfg
app.name=SenchaListScrollReset
app.framework=touch
app.classpath=${app.dir}/app.js,${app.dir}/app,ux // ←set "ux" directory
Excute build
cd sencha-list-scroll-reset
sencha app build production
Publishment (github / sencha market)
- in github
- in sencha market
Publishment in github
- push application to github repository
- It is better to deploy sample.
Publishment in sencha market
- About it
- Submit
About it
Input
Enter those information
- name
- description
- screenshot
- license
Apply (Under examination)
Apply (Approval)
\(^o^)/