ExtJS: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Sencha CMD==
==Sencha CMD==
<source lang="bash">
<syntaxhighlight lang="bash">
unzip SenchaCmd-7.5.1.20-linux-amd64.sh.zip  
unzip SenchaCmd-7.5.1.20-linux-amd64.sh.zip  
sudo sh SenchaCmd-7.5.1.20-linux-amd64.sh
sudo sh SenchaCmd-7.5.1.20-linux-amd64.sh
Line 19: Line 19:


sencha diag show
sencha diag show
</source>
</syntaxhighlight>


==Optionally==
==Optionally==
<source lang="bash">
<syntaxhighlight lang="bash">
# using classic toolkit for web application
# using classic toolkit for web application
sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate app Web -classic ui.web
sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate app Web -classic ui.web
Line 28: Line 28:
cd ui.web;sencha app build
cd ui.web;sencha app build
sencha web start
sencha web start
</source>
</syntaxhighlight>


<source lang="bash">
<syntaxhighlight lang="bash">
# using modern toolkit for mobile application
# using modern toolkit for mobile application
sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate app Mob -modern ui.mob
sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate app Mob -modern ui.mob
Line 36: Line 36:
cd ui.mob;sencha app build
cd ui.mob;sencha app build
sencha web start
sencha web start
</source>
</syntaxhighlight>


<source lang="bash">
<syntaxhighlight lang="bash">
if [ ! -f 'workspace.json' ]&&[ ! -d 'ext' ];then \
if [ ! -f 'workspace.json' ]&&[ ! -d 'ext' ];then \
     sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate workspace .;\
     sencha -sdk=$HOME/.chorke/academia/sdk/ext-6.2.0 generate workspace .;\
fi
fi
</source>
</syntaxhighlight>


<source lang="bash">
<syntaxhighlight lang="bash">
if [ ! -d 'ext' ];then \
if [ ! -d 'ext' ];then \
     sencha app install $HOME/.chorke/academia/sdk/ext-6.2.0;\
     sencha app install $HOME/.chorke/academia/sdk/ext-6.2.0;\
fi
fi
</source>
</syntaxhighlight>


<source lang="bash">
<syntaxhighlight lang="bash">
sencha app build --clean --dev
sencha app build --clean --dev
sencha app build --clean --pro
sencha app build --clean --pro
</source>
</syntaxhighlight>


<source lang="bash">
<syntaxhighlight lang="bash">
sencha package upgrade
sencha package upgrade
sencha app upgrade
sencha app upgrade
sencha app refresh
sencha app refresh
sencha app watch
sencha app watch
</source>
</syntaxhighlight>


==Simplified==
==Simplified==
<source lang="bash">
<syntaxhighlight lang="bash">
# using classic toolkit for web application
# using classic toolkit for web application
sencha -sdk $HOME/.chorke/academia/sdk/ext-6.2.0 generate app -classic Web ./ui.web;\
sencha -sdk $HOME/.chorke/academia/sdk/ext-6.2.0 generate app -classic Web ./ui.web;\
Line 74: Line 74:
cd ui.mob;sencha app build;\
cd ui.mob;sencha app build;\
sencha web start
sencha web start
</source>
</syntaxhighlight>


==Remote REST==
==Remote REST==
<source lang="js">
<syntaxhighlight lang="js">
Ext.define( 'CKo.store.m00.sm.M00SM00X00', {
Ext.define( 'CKo.store.m00.sm.M00SM00X00', {
     extend: 'Ext.data.Store',
     extend: 'Ext.data.Store',
Line 110: Line 110:
     }
     }
});
});
</source>
</syntaxhighlight>


==ExtJS Hacks==
==ExtJS Hacks==
<source lang="properties">
<syntaxhighlight lang="properties">
;ExtJS 6.2 GPL Example KitchenSink
;ExtJS 6.2 GPL Example KitchenSink
KitchenSink          :    677~    857
KitchenSink          :    677~    857
Line 127: Line 127:
Cookies              : 243,788~243,827
Cookies              : 243,788~243,827
prettyPrint          : 243,828~245,738
prettyPrint          : 243,828~245,738
</source>
</syntaxhighlight>


==Bootstrap==
==Bootstrap==
{|
{|
| valign="top" |
| valign="top" |
<source lang="js">
<syntaxhighlight lang="js">
CKi.app.load.lib.init();
CKi.app.load.lib.init();
CKi.app.load.dbs.init();
CKi.app.load.dbs.init();
CKi.app.load.gui.init();
CKi.app.load.gui.init();
</source>
</syntaxhighlight>


| valign="top" |
| valign="top" |
<source lang="js">
<syntaxhighlight lang="js">
CKi.app.load.lib.done();
CKi.app.load.lib.done();
CKi.app.load.dbs.done();
CKi.app.load.dbs.done();
CKi.app.load.gui.done();
CKi.app.load.gui.done();
</source>
</syntaxhighlight>


| valign="top" |
| valign="top" |
<source lang="js">
<syntaxhighlight lang="js">
CKi.app.load.init();
CKi.app.load.init();
CKi.app.load.done();
CKi.app.load.done();
</source>
</syntaxhighlight>
|}
|}


Line 155: Line 155:
  ssh -L 1841:localhost:1841 [email protected]
  ssh -L 1841:localhost:1841 [email protected]


<source lang="bash">
<syntaxhighlight lang="bash">
export app='PWa';\
export app='PWa';\
export SDK_VERSION='6.2.0';\
export SDK_VERSION='6.2.0';\
Line 165: Line 165:
cd $dir;sencha app build --clean --pro;sencha app build -clean --dev;\
cd $dir;sencha app build --clean --pro;sencha app build -clean --dev;\
sencha app watch
sencha app watch
</source>
</syntaxhighlight>


<source lang="bash">
<syntaxhighlight lang="bash">
mvn clean install;\
mvn clean install;\
export pwa=academia-apps-ui.pwa;\
export pwa=academia-apps-ui.pwa;\
Line 181: Line 181:
pwd
pwd
EOF
EOF
</source>
</syntaxhighlight>


==Deploy Icons==
==Deploy Icons==
<source lang="bash">
<syntaxhighlight lang="bash">
t='green_dark';\
t='green_dark';\
z=appicon_$t.zip;\
z=appicon_$t.zip;\
Line 193: Line 193:
cp $t/$d/round/*.png icons/pwa/$d/;done;rm -rf $t;zip -r $z .;\
cp $t/$d/round/*.png icons/pwa/$d/;done;rm -rf $t;zip -r $z .;\
scp $z [email protected]:/var/chorke/www/repo/cmd/sencha/pwa/;rm -rf $z
scp $z [email protected]:/var/chorke/www/repo/cmd/sencha/pwa/;rm -rf $z
</source>
</syntaxhighlight>


==Component==
==Component==
Line 221: Line 221:
* [https://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid-2/ Top 10 Ext JS Development Practices to Avoid]
* [https://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid-2/ Top 10 Ext JS Development Practices to Avoid]
* [https://stackoverflow.com/questions/37199369 React Routing with Spring MVC]
* [https://stackoverflow.com/questions/37199369 React Routing with Spring MVC]
* [https://examples.sencha.com/ExtReact/7.0.0/kitchensink/frame-index.html#/ ExtReact  Kitchen Sink 7.0.0]
* [https://examples.sencha.com/ExtReact/7.0.0/kitchensink/frame-index.html#/ Kitchen Sink » ExtReact 7.0.0]
* [https://examples.sencha.com/extjs/7.4.0/examples/kitchensink/frame-index.html?classic#all Ext JS Kitchen Sink 7.4.0]
* [https://examples.sencha.com/extjs/7.4.0/examples/kitchensink/frame-index.html?classic#all Kitchen Sink » Ext JS 7.4.0]
* [https://examples.sencha.com/extjs/7.3.0/examples/kitchensink/frame-index.html?classic#all Ext JS Kitchen Sink 7.3.0]
* [https://examples.sencha.com/extjs/7.3.0/examples/kitchensink/frame-index.html?classic#all Kitchen Sink » Ext JS 7.3.0]
* [https://examples.sencha.com/extjs/7.1.0/examples/kitchensink/frame-index.html?classic#all Ext JS Kitchen Sink 7.1.0]
* [https://examples.sencha.com/extjs/7.1.0/examples/kitchensink/frame-index.html?classic#all Kitchen Sink » Ext JS 7.1.0]
* [https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/frame-index.html?profile=triton Ext JS Kitchen Sink 7.0.0]
* [https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/frame-index.html?profile=triton Kitchen Sink » Ext JS 7.0.0]
* [http://examples.sencha.com/extjs/6.6.0/examples/kitchensink/frame-index.html?classic Ext JS Kitchen Sink 6.6.0]
* [http://examples.sencha.com/extjs/6.6.0/examples/kitchensink/frame-index.html?classic Kitchen Sink » Ext JS 6.6.0]
* [http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/frame-index.html?profile=crisp Ext JS Kitchen Sink 6.2.0]
* [http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/frame-index.html?profile=crisp Kitchen Sink » Ext JS 6.2.0]
* [http://cdn.medisys.com.my/docs/ext-6.0.0/build/examples/kitchensink/?profile=crisp Ext JS Kitchen Sink 6.0.0]
* [http://cdn.medisys.com.my/docs/ext-6.0.0/build/examples/kitchensink/?profile=crisp Kitchen Sink » Ext JS 6.0.0]


| valign="top" |
| valign="top" |
Line 279: Line 279:
* [[Google Closure Compiler]]
* [[Google Closure Compiler]]
* [[React Native]]
* [[React Native]]
* [[PrimeFaces]]
* [[ReactJS]]
* [[ReactJS]]


| valign="top" |
| valign="top" |
* [https://examples.sencha.com/ExtReact/7.5.0/kitchensink/frame-index.html#/ ExtReact  Kitchen Sink 7.5.0]
* [https://examples.sencha.com/ExtAngular/7.5.0/kitchensink/frame-index.html#/ Kitchen Sink » ExtAngular 7.5.0]
* [https://examples.sencha.com/extjs/7.6.0/examples/kitchensink/frame-index.html?modern#all Ext JS Kitchen Sink 7.6.0]
* [https://examples.sencha.com/ExtReact/7.5.0/kitchensink/frame-index.html#/ Kitchen Sink » ExtReact 7.5.0]
* [https://examples.sencha.com/extjs/7.7.0/examples/kitchensink/frame-index.html?modern#all Ext JS Kitchen Sink 7.7.0]
* [https://examples.sencha.com/extjs/7.6.0/examples/kitchensink/frame-index.html?modern#all Kitchen Sink » Ext JS 7.6.0]
* [https://examples.sencha.com/extjs/7.7.0/examples/kitchensink/frame-index.html?modern#all Kitchen Sink » Ext JS 7.7.0]
* [https://examples.sencha.com/extjs/7.8.0/examples/kitchensink/frame-index.html?modern#all Kitchen Sink » Ext JS 7.8.0]
* [https://examples.sencha.com/gxt-examples/index.html GXT Examples]
* [https://examples.sencha.com/gxt-examples/index.html GXT Examples]


|}
|}

Latest revision as of 02:50, 24 May 2024

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 [email protected]

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 [email protected]:~;\
ssh [email protected] '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 [email protected]:/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

Retrieved from "https://cdn.chorke.org/weke/index.php?title=ExtJS&oldid=11519"