2. 程式人生 > >extjs的學習筆記

extjs的學習筆記

阿新 • • 發佈：2018-12-01

一.extjs的官網：http://extjs.org.cn/

二.產品目錄介紹

一.extjs的官網：http://extjs.org.cn/

二.產品目錄介紹

三.在專案中使用

應用語言local檔案，resources樣式檔案，核心的js檔案

引入：

<link  type="text/css" rel="stylesheet" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all.js

"></script>

四.在html中編輯js時自動進行提示，需要安裝spket外掛

下載地址：http://www.spket.com/download.html

解壓的features和plugins和eclipse中相應資料夾合併，重啟eclipse

 

 

 

設定新的ExtJS Profile，選中並點選“JavaScript Profiles” 對話方塊右手邊的“Defalut”按鈕；

下面這個操作，根據自己需要設定（可以全選）。

 

6)重啟eclipse或者Myeclipse；

7)建立新的JS檔案並輸入： Ext這樣就可設定Ext Code程式碼自動完成的功能。

效果如下：

 

 用spket編輯器開啟js：

  1. 可將 *.js 檔案的預設編輯器設定為 Spket JavaScript Editor：

五.對extjs的基本瞭解

A、面板（Panel）

B、佈局（Layout）

C、元件（Component）

D、渲染（Render）

E、視窗（Window）

F、對話方塊（Dialog）

六.hellword

<%@ page language=

"java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link type="text/css" rel="stylesheet"

    href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript">

    Ext.onReady(function() {

        Ext.

        Ext.MessageBox.alert("hell world");

    })

</script>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

七.關於對json物件的簡單實用

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link type="text/css" rel="stylesheet"

    href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript">

    Ext.onReady(function() {

         var cat = {

                name : "kafe",

                sex : "男",

                age : 18,

                type : "動物"

            }; 

         Ext.MessageBox.alert("hell world" + "姓名：" + cat.name + "性別：" + cat.sex

                    + "型別" + cat.type); 

    });

</script>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

八.ExtJS幾種常見提示框

A、Ext.MessageBox.alert(String title,String mess,function fn,Object scope)

B、Ext.MessageBox.confirm(String title,String mess,function fn,Object scope)

C、Ext.MessageBox.prompt(String title,String mess,function fn,Object scope,Boolean/Number multiline,String value)

D、Ext.MessageBox.wait(String mess,String title,Object scope);

配置項

型別

說明

title

String

提示框的標題

msg

String

顯示資訊的內容

width

String

對話方塊的寬度，以畫素為單位

closable

Boolean

false將隱藏右上角的關閉按鈕，預設為false。如果已設定wait或progress為true則該配置將被忽略，提示框只能通過程式關閉，不能通過右上角的關閉按鈕關閉

modal

Boolean

true為模式視窗，false為非模式視窗

Fn

Function

回撥函式

buttons

Object/Boolean

一個包含配置資訊的json物件或false不顯示任何按鈕,預設為false

progress

Boolean

true則表示一個進度條，預設為false,該進度條需要由程式控制滾動

progressText

String

進度條上顯示的文字

wait

Boolean

True則表示一個自動滾動的滾動條，預設為false

prompt

Boolean

String

true表示一個單行文字域

如果prompt設定為true,則value值將顯示在文字域中

multiline

Boolean

如果prompt設定為true,則multiline設定為true顯示多行文字區，false顯示單行文字域

icon

String

一個樣式檔案，它為對話方塊提供一個北京圖，下面有一個詳細列表

提示框按鈕配置物件

說明

注意

Ext.Msg.CANCEL

只顯示一個“取消”按鈕

注意配置物件的大小寫，正確的寫法: Ext.Msg.CANCEL

錯誤的寫法：

Ext.Msg.cancel

Ext.Msg.Ok

只顯示一個“確定”按鈕

Ext.Msg.OKCANCEL

顯示兩個按鈕“確定”和“取消”

Ext.Msg.YESNO

顯示兩個按鈕“是”和“否”

Ext.Msg.YESNOCANCEL

顯示三個按鈕“是”“否”和“取消”

九.進度條

   

<script type="text/javascript">

    Ext.onReady(function() {

        var progress = Ext.MessageBox.show({

            title:'進度條',

            width:300,

            progress:true, //設成true進度條才會顯示

            msg:'當前進度'

        });

         var index = 0;

         var t = {//建立一個任務變數

                 run:function(){

                     progress.updateProgress(index/100,"當前已完成"+index+"%","請稍後……");

                     index+=5;

                     if(index > 100){

                         Ext.TaskManager.stop(t);

                     }

                 },

                 interval:1000

         };

         Ext.TaskManager.start(t);//使用TaskManager來開始任務

    });

</script>

十.第3講.ExtJS工具欄、選單欄

1.工具欄使用Toolbar建立，在toolbar上使用add新增工具，使用資料進行新增

配置項

類別

說明

handler

Function

一個函式，在按鈕被單擊之後被呼叫

iconCls

String

一個樣式表，提供按鈕顯示的圖示

menu

Mixed

引數可以是一個選單物件或者是選單物件的id,也可以是一個有效的選單配置物件

text

String

按鈕上顯示的文字

 

<script type="text/javascript">

    Ext.onReady(function() {

        var toolbar = new Ext.toolbar.Toolbar({

            renderTo : 'toolbar',

            width : 700

        });

        toolbar.add([ {//填充按鈕

            text : '新建資料夾',

            iconCls : 'createIcon', 

            handler : buttonClick

        }, {

            text : '開啟資料夾',

            iconCls : 'openIcon',

            handler : buttonClick

        }, {

            text : '儲存資料夾',

            iconCls : 'saveIcon',

            handler : buttonClick

        }, '-', {//-表示|分割符

            xtype : 'textfield',

            hideLable : true,

            width : 100

        }, '->', '<a href="http://www.baidu.com">HtmlElement百度</a>' ,"String字串"]);//->表示填充剩餘空間

        function buttonClick(btn) {

            alert(btn.text);

        }

        Ext.get("enable").on("click", function() {

            toolbar.enable();

        })

        Ext.get("disable").on("click", function() {

            toolbar.disable();

        })

    });

</script>

執行效果：

 

 2.選單欄

 

<script type="text/javascript">

    Ext.onReady(function() {

        var toolbar = new Ext.toolbar.Toolbar({

            renderTo : 'toolbar',

            width : 700

        });

        toolbar.add([ {

            text : '新建資料夾',

            iconCls : 'createIcon', 

            handler : buttonClick,

            menu:new Ext.menu.Menu({

                shadow:'drop',

                items:[

                        {

                            text:'新建word',

                            icon:'images/add.png',

                            menu:new Ext.menu.Menu({

                                shadow:'drop',

                                items:[{

                                    text:'建立word2007',

                                    icon:'images/add.png',

                                    menu:new Ext.menu.Menu({

                                        shadow:'drop',

                                        items:[{

                                            text:'顏色選擇',

                                            icon:'images/add.png',

                                            menu:new Ext.menu.ColorPicker()

                                        },

                                        {

                                            text:'日期選擇',

                                            icon:'images/add.png',

                                            menu:new Ext.menu.DatePicker()

                                        }

                                        ]

                                    })

                                },{

                                    text:'建立word2010',

                                    icon:'images/add.png'

                                }]

                            })    

                        },

                        {

                            text:'新建excel',

                            icon:'images/add.png'

                        },

                        {

                            text:'新建ppt',

                            icon:'images/add.png'

                        }

                        ]

            })

        }, {

            text : '開啟資料夾',

            iconCls : 'openIcon',

            handler : buttonClick

            

        }, {

            text : '儲存資料夾',

            iconCls : 'saveIcon',

            handler : buttonClick

        }, '-', {//-表示|分割符

            xtype : 'textfield',

            hideLable : true,

            width : 100

        }, '->', '<a href="http://www.baidu.com">HtmlElement百度</a>' ,"String字串"]);//->表示填充剩餘空間

        function buttonClick(btn) {

        //    alert(btn.text);

        }

        Ext.get("enable").on("click", function() {

            toolbar.enable();

        })

        Ext.get("disable").on("click", function() {

            toolbar.disable();

        })

    });

</script>

執行效果：

 

十一.extjs的表單

 

 

 

 示例：

<script type="text/javascript">

    Ext.onReady(function() {

        var form = new Ext.form.FormPanel({

            title : '表單標題',

            id : 'loginForm',

            renderTo:'form',

            width : 500,

            heigth : 500,

            items : [ {

                xtype : 'textfield',

                fieldLabel : '使用者名稱',

                //--------驗證區----------------

                allowBlank : false,//是否為空

                blankText : '使用者名稱不能為空',//如果空了，提示資訊

                emptyText : '請輸入使用者名稱',//文字框的預設填充內容，提示

                msgTarget : 'under',//設定驗證提示資訊的位置，qtip：顯示一個浮動的提示資訊，title：顯示一個瀏覽器的負擔提示資訊，under：在欄位下方顯示一個提示資訊， side: 在欄位的右邊顯示一個提示資訊 

                regex : /^\d{3,10}$/,//正則表單驗證

                regexText : '使用者名稱必須是3-10位的數字！',

                //----------------------------

                name : 'username',

                id : 'username',

            }, {

                xtype : 'textfield',

                fieldLabel : '密碼',

                //--------驗證區----------------

                allowBlank : false,//是否為空

                blankText : '密碼不能為空',//如果空了，提示資訊

                emptyText : '請輸入密碼',//文字框的預設填

相關推薦

ExtJS學習筆記

必殺技  -> Ext.MessageBox.alert("hello","Hello,easyjf open source"); 1. window控制元件 var obj={title:"hello",width:300,height:200,html:'Hell

ExtJS學習筆記（四）使用樹控制元件TreeNode ，TreeLoader

  在ExtJS中，不管是葉子節點還是非葉子節點，都統一用TreeNode表表示樹的節點。在ExtJS中，有兩種型別的樹節點。一種節點是普通的簡單樹 節點，由Ext.tree.TreeNode定義，另外一種是需要非同步載入子節點資訊的樹節點，該類由Ext.tree.Asyn

【Extjs學習筆記01】使用Sencha Cmd構建專案

http://cdn.sencha.com/ext/gpl/ext-5.1.1-gpl.zip?mkt_tok=eyJpIjoiWW1FME5qTmhaamMwWmpjMSIsInQiOiJhdGpaeXppTFJRNFZBYXNNbVJYelY1Qk4xMFwvQmszOGpadjdcL2NcL1wvcm

ExtJs學習筆記(7)_獲取GridPanel選中行的詳細資訊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

ExtJS學習筆記(一)

1.ExtJS環境搭建 ①先在官網下載spket-1.6.23，extjs-4.1.1，解壓，將解壓後的資料夾plugins,features放到MyEclipse\MyEclipse 10\dropins內，我的是MyEclipse10,可以這樣用。然後開啟MyEclip

Extjs學習筆記3-多功能編輯框

效果圖 下拉列表框 日期 checkbox js程式碼 Ext.onReady(function(){ Ext.create("Ext.data.Store",{ //建立一個store用來初始化panel storeId:"test", fields

extjs model store學習筆記

instance users java use inter def clas pts sco http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/data_package.html // 定義一個ModelExt

extjs的學習筆記

一.extjs的官網：http://extjs.org.cn/ 二.產品目錄介紹 一.extjs的官網：http://extjs.org.cn/ 二.產品目錄介紹 三.在專案中使用 應用語言local檔案，resources樣式檔案，核心的js檔案 引入： <

[ExtJS5學習筆記]第六節 Extjs的類系統Class System命名規則及定義和除錯

-------------------------------------------------------------資源連結-------------------------------------------------------------------------

Robot Operating System (ROS)學習筆記4---語音控制

sla 語音 出現 tput http 學習 process 輸入 ubun 搭建環境：XMWare Ubuntu14.04 ROS（indigo） 轉載自古月居 轉載連接：http://www.guyuehome.com/260 一、語音識別包 1、安裝

MySQL學習筆記（六）—— MySQL自連接

概念 cor 子查詢 ron 表操作 例子 質量 _id order by 有的時候我們需要對同一表中的數據進行多次檢索,這個時候我們可以使用之前學習過的子查詢,先查詢出需要的數據,再進行一次檢索。 例如:一張products表,有產品id,供應商id(vend_

jquery 深入學習筆記之中的一個 （事件綁定）

color 動態 name his pan mouseover this pre con 【jquery 事件綁定】 1、加入元素事件綁定 (1) 加入事件為當前元素 $(‘p‘).on(‘click‘,function(){ //code here ..

AngularJS入門學習筆記一

rect directive 技術分享 attr 兩個 ava 內容 module 大括號 首先聲明： 本博客源自於學習：跟我學AngularJs:AngularJs入門及第一個實例。通過學習，我自己的一些學習筆記。 1.AngularJS的一些基本特性 （1）使用雙大括號

Python學習筆記-2017.5.4

列表 lin 覆蓋範圍 復習 處理 pytho 內部 global txt 本文章記錄學習過程中的細節和心得： 復習所學課程： 1、文件的操作： 　　打開文件，對文件的操作打開方式有兩種： 　　第一種： 　　　　 f = open("test.txt", "r")#以只讀

SAS學習筆記之函數應用

不能 oracle 理解 資料 oracl 函數應用 特殊 put acl 今天在做數據需求的時候遇到一些問題，因為不能夠在數據庫裏面做，僅僅好在SAS裏面實現。這就遇到了一些麻煩，須要使用一些函數實現部分功能，如查找字段中某個特殊字符出現的次數，查找某個字符的位置等，

OpenCV2學習筆記（十五）：利用Cmake高速查找OpenCV函數源代碼

one 生成 img log 分享 lan 學習筆記 全部 modules 在使用OpenCV時，在對一個函數的調用不是非常了解的情況下，通常希望查到該函數的官方聲明。而假設想進一步研究OpenCV的函數，則必須深入到源碼。在VS中我們能夠選中想要查

avalonjs 學習筆記1---checkbox

nod item ack lex server ini npm 學習 define 一、vscode 安裝使用 1.vs code+node.js下載安裝 2.在node.js command prompt 中運行 npm install -g live-server 3

Linux學習筆記(三)：系統執行級與執行級的切換

查看 用戶操作 回車 water hat ntsysv tde 文件表 config 1.Linux系統與其它的操作系統不同，它設有執行級別。該執行級指定操作系統所處的狀態。Linux系統在不論什麽時候都執行於某個執行級上，且在不同的執行級上執行的程序和服務都不同，所要

Principle of Computing (Python)學習筆記(7) DFS Search + Tic Tac Toe use MiniMax Stratedy

ide out generate depth sku color ati cond with 1. Trees Tree is a recursive structure. 1.1 math nodes https://class.coursera.org/prin

Java程序猿的JavaScript學習筆記（12——jQuery-擴展選擇器）

type write number article mat 我們 content ace val 計劃按例如以下順序完畢這篇筆記： Java程序猿的JavaScript學習筆記（1——理念） Java程序猿的JavaScript學習筆記（2——屬性復制和繼承） Jav