ExtJS

From Chorke Wiki
Jump to navigation Jump to search

Sencha CMD

unzip SenchaCmd-7.5.1.20-linux-amd64.sh.zip 
sudo sh SenchaCmd-7.5.1.20-linux-amd64.sh
export SENCHA_CMD='/opt/cli/sencha/cmd'
export OPENSSL_CONF='/etc/ssl'
export PATH=$PATH:$SENCHA_CMD

mkdir -p ~/.sencha/cmd
cat << EOF > $HOME/.sencha/cmd/sencha.cfg
#------------------------------------------------------------------------------
# The folder for the local package repository. By default, this folder is shared
# by all versions of Sencha Cmd. In other words, upgrading Sencha Cmd does not
# affect the local repository.

repo.local.dir=${HOME}/.sencha/cmd/repo

EOF

sencha diag show

Optionally

# using classic toolkit for web application
sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate app Web -classic ui.web
sed -i 's/"theme": "theme-triton"/"theme": "theme-crisp"/g' ./ui.web/app.json
cd ui.web;sencha app build
sencha web start
# using modern toolkit for mobile application
sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate app Mob -modern ui.mob
sed -i 's/"theme": "theme-triton"/"theme": "theme-ios"/g' ./ui.mob/app.json
cd ui.mob;sencha app build
sencha web start
if [ ! -f 'workspace.json' ]&&[ ! -d 'ext' ];then \
    sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate workspace .;\
fi
if [ ! -d 'ext' ];then \
    sencha app install $HOME/.chorke/academia/sdk/ext-6.2.0;\
fi
sencha app build --clean --dev
sencha app build --clean --pro
sencha package upgrade
sencha app upgrade
sencha app refresh
sencha app watch

Simplified

# using classic toolkit for web application
sencha -sdk $HOME/.chorke/academia/sdk/ext-6.2.0 generate app -classic Web ./ui.web;\
cd ui.web;sencha app build;\
sencha web start

# using modern toolkit for mobile application
sencha -sdk $HOME/.chorke/academia/sdk/ext-6.2.0 generate app -modern Mob ./ui.mob;\
sed -i 's/"theme": "theme-triton"/"theme": "theme-ios"/g' ./ui.mob/app.json;\
cd ui.mob;sencha app build;\
sencha web start

Remote REST

Ext.define( 'CKo.store.m00.sm.M00SM00X00', {
    extend: 'Ext.data.Store',
    model : 'CKo.model.m00.mm.M00MM00X00',
    autoLoad    : false,
    remoteSort  : true,
    remoteFilter: true,
    autoSync    : true,
    proxy       : {
        type: 'rest',
        api : {
            create : 'https://dev.chorke.org/m/00/cm/00/x/00', //M00CM00X00
            read   : 'https://dev.chorke.org/m/00/cm/00/x/00', //M00CM00X00
            update : 'https://dev.chorke.org/m/00/cm/00/x/00', //M00CM00X00
            destroy: 'https://dev.chorke.org/m/00/cm/00/x/00'  //M00CM00X00
        },
        actionMethods: {
            create : 'POST',
            read   : 'GET',
            update : 'PUT',
            destroy: 'DELETE'
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            root: 'data'
        }
    }
});

ExtJS Hacks

;ExtJS 6.2 GPL Example KitchenSink
KitchenSink           :     677~    857
MZ/pivot              :     848~    882
KitchenSink/Component :   8,922~  8,991
KitchenSink/VTypes    :  37,500~ 37,531
Ext/pivot             : 142,902~149,705
Ext/d3                : 172,125~176,035
Ext/calender          : 176,036~182,218
Ext/d3                : 182,219~182,588
KitchenSink           : 182,589~243,760
Ext.example           : 243,761~243,787
Cookies               : 243,788~243,827
prettyPrint           : 243,828~245,738

Bootstrap

CKi.app.load.lib.init();
CKi.app.load.dbs.init();
CKi.app.load.gui.init();
CKi.app.load.lib.done();
CKi.app.load.dbs.done();
CKi.app.load.gui.done();
CKi.app.load.init();
CKi.app.load.done();

Deploy Apps

ssh -L 1841:localhost:1841 user@cdn.chorke.org
export app='PWa';\
export SDK_VERSION='6.2.0';\
export dir='academia-apps-ui.pwa';rm -rf $dir;\
bash <(curl -s 'https://cdn.chorke.org/repo/cmd/sencha/new.sh.txt')

export app='PWa';export dir='academia-apps-ui.pwa';\
bash <(curl -s 'https://cdn.chorke.org/repo/cmd/sencha/mavenify.sh.txt');\
cd $dir;sencha app build --clean --pro;sencha app build -clean --dev;\
sencha app watch
mvn clean install;\
export pwa=academia-apps-ui.pwa;\
scp target/$pwa.jar cid@cdn.chorke.org:~;\
ssh cid@cdn.chorke.org 'bash -s' cat<<EOF
sudo su
cd /var/chorke/www/cdn.chorke.org/html/
mv /home/pi/$pwa.jar .;rm -rf *.json *.ico index.html *.js static
unzip -q -o $pwa.jar;mv META-INF/resources/* .;rm -rf META-INF *.jar
curl -s https://cdn.chorke.org/repo/web/sencha/CKi.css>static/CKi.css
curl -s https://cdn.chorke.org/repo/web/sencha/CKi.js>static/CKi.js
ls -lah
pwd
EOF

Deploy Icons

t='green_dark';\
z=appicon_$t.zip;\
rm -rf icons/pwa/*;\
unzip $HOME/Downloads/$t.zip;\
mkdir -p icons/pwa/{android,apple,favicon,ms};\
for d in android apple favicon ms;do \
cp $t/$d/round/*.png icons/pwa/$d/;done;rm -rf $t;zip -r $z .;\
scp $z cid@cdn.chorke.org:/var/chorke/www/repo/cmd/sencha/pwa/;rm -rf $z

Component

Accordion Swiper
Undoable Accordion Swiper
Basic Accordion Swiper
Undoable Step Swiper
Basic Step Swiper
Grid Panel
Reconfigure Grid
Editable Grid
Cell Editing
Ticker Grid
Tree Panel
Navigation Menu

References