初學ExtJS（6.6.0）

API文檔地址 https://docs.sencha.com/extjs/6.6.0/modern/Ext.html

build：壓縮後的Ext全部源碼（裏面分類存放） ext.js：核心文件，其中包含運行應用程序的所有功能。 ext-all.js：此文件包含在文件中沒有註釋的所有壓縮的代碼。 ext-all-debug.js：這是ext-all.js的未分級版本，用於調試目的。 ext-all-dev.js：此文件也未分級，用於開發目的，因爲它包含所有註釋和控制檯日誌，以檢查任何錯誤/問題。 ext-all.js：這個文件用於生產目的，主要是因爲它比任何其他小得多。 resources：Ext UI資源文件目錄，如CSS、圖片文件都存放在這裏。

classic：如果我們要使用桌面應用程序，那麼我們可以使用classic下的經典主題。 locale：國際化文件（locale-zh_CN.js：簡體） theme-triton：主題，扁平化、響應式

examples：提供使用ExtJs技術做出的小實例。

modern：如果我們要使用移動應用程序，那麼我們將使用現代主題modern。

實踐

一、手打編寫，瞭解下Ext

1、彈框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Extjs樣式文件-->
    <link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
    <!--引入extjs核心庫-->
    <script src="ext/ext-all.js"></script>
    <script>
        // alert("hello")
        //在extjs框架初始化完成才執行
        Ext.onReady(function () {
            Ext.MessageBox.alert("溫馨提示","hello");
        })
    </script>
</head>
<body>
</body>
</html>

2、面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Extjs樣式文件-->
    <link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
    <!--引入extjs核心庫-->
    <script src="ext/ext-all.js"></script>
    <script>
        Ext.onReady(function () {
            //創建面板對象，第一種 通過new創建
            var panel=new Ext.Panel({
                width:300,
                height:400,
                title:'標題',
                html:'hello',
                //必須要進行渲染纔會顯示
                renderTo:Ext.getBody()
            })
            //第二張 使用create方法來創建
            Ext.create('Ext.Panel',{
                width:300,
                height:400,
                title:'標題',
                html:"world",
                //必須要進行渲染纔會顯示
                renderTo:'dd'
            })
            //第三種 使用Ext.create和xtype
            var panel3=Ext.create({
                xtype:'panel',
                width:300,
                height:400,
                title:'標題',
                html:'你好',
                //監聽 第一種方法
                listeners:{
                    close:function () {
                        console.log("關閉。。。")
                    }
                }
                //必須要進行渲染纔會顯示
                // renderTo:Ext.getBody()
            })
            //監聽 第二種方法
            panel3.on('close',function () {
                console.log("關閉2.。。")
            })
            //監聽 第三種方法
            panel3.addListener('close',function () {
                console.log("關閉3.。。")
            })
            //渲染延遲
            panel3.render(Ext.getBody())
            //查看拖拽屬性
            console.log(panel3.draggable);
            //關閉
            panel3.close();
        })
    </script>
</head>
<body>
<!--渲染位置-->
<div id="dd"></div>
</body>
</html>

3、list數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Extjs樣式文件-->
    <link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
    <!--圖標樣式-->
    <link rel="stylesheet" type="text/css" href="ext/css/icon.css">
    <!--引入extjs核心庫-->
    <script src="ext/ext-all.js"></script>
    <!--國際化文件-->
    <script src="ext/classic/locale/locale-zh_CN.js"></script>
    <script>
        Ext.onReady(function () {
            //創建一個store要使用的model
            Ext.define('User', {
                extend: 'Ext.data.Model',
                fields: [{name: 'username', type: 'string'},
                    {name: 'realname',  type: 'string'},
                    {name: 'hiredate',  type: 'string'},
                    {name: 'phone',  type: 'string'},
                    {name: 'state'}]
            });
            //創建數據源store
            var myStore = Ext.create('Ext.data.Store', {
                model: 'User',
                pageSize:'10',//每頁顯示10條，地址傳參用
                proxy: {
                    type: 'ajax',
                    url: 'json/list.json',
                    reader: {
                        type: 'json',
                        rootProperty: 'result'
                    }
                },
                autoLoad: true //自動加載數據
            });
            //創建gridpanel
            Ext.create('Ext.grid.Panel',{
                title:'用戶管理',
                iconCls:'user',//圖標
                height:700,
                store:myStore,
                forceFit:true,//列寬自適應
                columnLines:true,//列框線
                renderTo:Ext.getBody(),
                tbar: [
                    { xtype: 'button', text: '新增',iconCls:'add',border:false,handler:function(){} },
                    { xtype: 'button', text: '修改',iconCls:'edit',border:false,handler:function(){} },
                    { xtype: 'button', text: '刪除',iconCls:'delete',border:false,handler:function(){} },
                    { xtype: 'button', text: '刷新',iconCls:'reload',border:false,handler:function(){} },
                ],//頂部工具欄
                bbar: { xtype:'pagingtoolbar',displayInfo:true,store:myStore},//底部{分頁；顯示隱藏信息；舊版本需要，展示右下角多少條}
                columns:[
                    { xtype:'rownumberer',width:30,align:'center'},
                    { header:'用戶名',dataIndex:'username'},
                    { header:'真實姓名',dataIndex:'realname'},
                    { header:'入職時間',dataIndex:'hiredate'},
                    { header:'電話',dataIndex:'phone'},
                    { header:'狀態',dataIndex:'state',renderer:function(value){//指定函數，把value值轉換爲可顯示的內容
                        return value?"在職":"<font color='red'>離職</font>";
                    }}]
            })
            //創建formpanel
            var formPanel = Ext.create('Ext.form.Panel', {
                bodyPadding: 30,//外邊距
                // width: 350,
                // The form will submit an AJAX request to this URL when submitted
                url: 'json/result.json',
                // 表單域Fields將被豎直排列，佔滿整個寬度
                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
                // The fields
                defaultType: 'textfield',
                items: [{
                    name: 'id',
                    hidden: true
                },{
                    fieldLabel: '用戶名',
                    name: 'username',
                    allowBlank: false //不允許爲空
                },{
                    fieldLabel: '真實姓名',
                    name: 'realname'
                },{
                    fieldLabel: '入職時間',
                    name: 'hiredate',
                    xtype: 'datefield',
                    format:'Y-m-d'
                },{
                    fieldLabel: '電話',
                    name: 'phone'
                },{
                    fieldLabel: '狀態',
                    name: 'state',
                    xtype: 'combobox',
                    store: new Ext.data.ArrayStore({
                        fields : ['value','text'],
                        data : [[true,'在職'],[false,'離職']]
                    }),
                    valueField:'value',
                    displayField:'text'
                }],
                // Reset and Submit buttons
                buttons: [{
                    text: '重置',
                    handler: function() {
                        this.up('form').getForm().reset();
                    }
                }, {
                    text: '保存',
                    formBind: true, //當表單驗證成功，按鈕啓用
                    disabled: true,
                    handler: function() {
                        var form = this.up('form').getForm();
                        if (form.isValid()) {
                            form.submit({
                                success: function(form, action) {
                                    Ext.Msg.alert('提示', "保存成功");
                                },
                                failure: function(form, action) {
                                    Ext.Msg.alert('Failed', action.result.msg);
                                }
                            });
                        }
                    }
                }]
            });
            //表單彈出框
            var add=Ext.create('Ext.window.Window', {
                title: '新增用戶',
                height: 350,
                width: 350,
                layout: 'fit',
                items: formPanel
            }).show();
        })
    </script>
</head>
<body>
</body>
</html>

二、上面都是手打的，認識一下Ext，下面開始使用cmd生成項目。

這個是找的網上的，下面我使用公司人提供的方法。

1、sencha -sdk /G:\extjs6\ext-6.6.0 generate app MyApp /G:\Extjs6\Project 綠色：extjs6 解壓的位置藍色：項目名紅色：項目生成的位置生成的是一個空白模板

2(1)、推薦使用根據模板生成項目：(推薦我用這個) sencha -sdk G:\extjs6\ext-6.6.0 generate app -s G:\extjs6\ext-6.6.0\templates\admin-dashboard Admin /G:\ext6

2(2)、根據模板生成項目後，修改app.json配置（1）找到output配置項修改base值"${ext.dir}/build/examples/admin-dashboard/${build.id}"改爲"${workspace.build.dir}/${build.environment}/${app.name}/${build.id}"
（2）引入中文語言包：找到"requires"配置改爲"requires" : ["charts", "font-awesome", "ux", "locale"], "locale": "zh_CN",

3、進入項目目錄執行 sencha app build。

4、查看。執行sencha app watch ，瀏覽器輸入localhost:1841訪問

初學ExtJS（6.6.0）

Win10 LTSC 2019 安裝後的一些步驟

推薦2款開源、美觀的WinForm UI控件庫

NET9 AspnetCore將整合OpenAPI的文檔生成功能而無需三方庫

在Linux下管理MySQL的大小寫敏感性

SpringBoot 添加Redis,編寫測試類錯誤

關於代碼評審使用的插件以及遇到的一些問題

初學ExtJS（6.6.0）

Jpa 自定義SQL語句條件查詢，多表關聯查詢

網頁接口響應時間長問題解決辦法(粗淺)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結