關於extjs嚮導的信息

本文目錄一覽：

• 1、extjs 如何與adobe air整合
• 2、問問在extjs里怎麼限制訪問設計頁面的ip
• 3、想用Extjs做一個左右布局的格式
• 4、extjs的card布局中使用XTemplate模板填充item的問題
• 5、使用ExtJS編寫的餅狀圖中間的步驟問題。
• 6、extjs 表格編輯，動態顯示列怎麼弄

extjs 如何與adobe air整合

構建開發環境

一、 開發環境

a. 開發工具版本

Eclipse JEE : Version: 3.4.0 ;

Aptana Studio Professional: Version: 1.2.1.019949_200811212258

Aptana Adobe AIR Support: Version: 1.2.1.019949_200811212306

EXTJS: Version: 2.2

AIR SDK: Version: Adobe AIR 1.5 SDK

b. 環境構建

這個就不多說了，大家自己看著構建吧，很簡單的。一定要注意版本，上面的版本是我測試通過的，大家可以放心使用。

開發應用程序

二、 開發應用程序

a. 新建一個 Adobe AIR Project項目， FileNewProject,打開 New Project嚮導，如下圖：

b. 輸入項目名稱 Julycn，其他可以保持不變

c. 可以定義你的版本、描述、版權信息和應用程序圖標等字元，也可以在application.xml文件中定義這些信息。

d. 定義項目的尺寸，是否可以改變窗口大小、最小化、最大化等

e. 導入 AIR框架，默認就可以了

f. 導入第三方 AJAX庫，我選擇了 EXTJS庫

g. 自動打開主項目文件， julycn.html會自動生成一些內容，並且可以運行

h. 運行應用項目 ,這裡不做修改，了解一下基本的環境和開發方式 ;

i. 運行結果 ,裡面有三個按鈕，單擊 」Read a local file using AIR Apis」是讀取本地文本文件 LocalFile.txt的內容，演示 API處理本地文件系統；如果單擊」doRequest(「」);」按鈕， AIR 應用程序將彈出另一個警告框，這一次顯示的是來自 Adobe.com 的 HTTP 響應。這演示了 XMLHttpRequest 對象如何處理遠程 Web站點。

打包應用程序並安裝

三、 打包應用程序

a. 在 Julycn項目上點擊右鍵 Export…Adobe AIR Package,取消 Package and generate Jaxer build version選框，點擊 Next

b. 這一步就是創建一個證書，點擊 Configure Certificates創建一個證書 ,Timestamp AIR Package這個選框一定要去掉，否則打的包無法安裝。

c. 選擇要打包的文件，這個默認即可

d. 現在可以到 D:\\workspace\\Julycn目錄下雙擊 Julycn.air文件，進行安裝。如果無法打開文件，請確認是否安裝 Adobe AIR runtime.

e. 安裝偶就不說啦 .

四、 請關注後續教程，開發一個增刪該查的應用程序

問問在extjs里怎麼限制訪問設計頁面的ip

為了方便管理，我想把伺服器上的某個文件夾共享出來，只允許特定IP的計算機進行訪問。如何實現了？service2003操作系統…我在網上找到了答打開：控制面版–管理工具-本地安全設置。點左邊的 IP安全策略，在本地計算機。 然後在右邊點右鍵–創建IP安全策略，打開IP安全策略嚮導。 下一步，出現IP安全策略名稱，隨便起個就行。比如叫 阻止192.168.1.16 下一步，出現激活默認響應規則，不要選中，把鉤去掉。 下一步，選中編輯屬性，完成。 然後出現了 IP安全策略屬性，點下邊的添加，出現規則屬性，點擊添加，出現IP策略器列表。把使用添加嚮導去掉，點右邊的添加，出現篩選器屬性。 定址欄 原地址選 一個特定的IP 192.168.1.163。目標IP是 我的IP地址。然後點擊確定。 現在回到 IP 篩選器列表，點擊確定，在規則屬性里應該多了個列表，選中它。然後切換到篩選器操作選項卡，把使用添加嚮導去掉，點擊添加。在出現的篩選器操作 屬性里的安全措施選項卡中，選擇 阻止，點擊確定。在篩選器操作選項卡中會多出一個阻止的選項，選中它。 總之，在IP篩選器列表中你要選中你建的那個列表，篩選器操作中要選中阻止。然後點擊應用以後關閉。 現在回到 IP安全策略 屬性 這裡，把你建的IP篩選器列表鉤上，點擊關閉。 這時，在你最開始打開的 本地安全設置里 會多出一個策略，就是你建立的 「阻止192.168.1.16」。在它身上點右鍵，選擇指派，就OK了。

想用Extjs做一個左右布局的格式

下面的示例代碼展示了一個基本的Card布局，布局中並沒有包含form元素，具體情況，還要根據實際情況進行處理：

//Card布局__類似嚮導

Ext.application({

name: ‘HelloExt’,

launch: function () {

var navigate = function (panel, direction) {

var layout = panel.getLayout();

layout[direction]();

Ext.getCmp(‘move-prev’).setDisabled(!layout.getPrev());

Ext.getCmp(‘move-next’).setDisabled(!layout.getNext());

};

Ext.create(‘Ext.panel.Panel’, {

title: ‘Card布局示例’,

width: 300,

height: 202,

layout: ‘card’,

activeItem: 0,

x: 30,

y: 60,

bodyStyle: ‘padding:15px’,

defaults: { border: false },

bbar: [{

id: ‘move-prev’,

text: ‘上一步’,

handler: function (btn) {

navigate(btn.up(“panel”), “prev”);

},

disabled: true

},

‘-‘,

{

id: ‘move-next’,

text: ‘下一步’,

handler: function (btn) {

navigate(btn.up(“panel”), “next”);

}

}],

items: [{

id: ‘card-0’,

html: ‘h1第一步/h1’

},

{

id: ‘card-1’,

html: ‘h1第二步/h1’

},

{

id: ‘card-2’,

html: ‘h1最後一步/h1’

}],

renderTo: Ext.getBody()

});

}

});

extjs的card布局中使用XTemplate模板填充item的問題

本質原因是變數_pageFile是在render事件觸發後，才調用事件函數然後去獲取這個參數，而這個參數最後的結果是數據的最後一個值，修改代碼如下：

//..

listeners : {

                ‘render’ : function(panel){

                    console.log(this);

                    this.tpl.overwrite(this.body, this.initialConfig.pageFile);

                }

            },

            scope : this,

            pageFile : _pageFile

//..

完整的例子：

var curIndex = 1;

    var navHandler = function(){

         if(curIndex == 2) {

         curIndex  = 0

        }

   card.getLayout().setActiveItem(curIndex);

    curIndex ++;

};

    var card = new Ext.Panel({

    title: ‘嚮導的演示 Example Wizard’,

    layout:’card’,

    activeItem: 0,

    bodyStyle: ‘padding:15px’,

    defaults: {

       // 每個子組件都有效 applied to each contained panel

        border:false

    },

    // 簡單的導航按鈕，可以擴展更多 just an example of one possible navigation scheme, using buttons

    bbar: [

        {

            id: ‘move-prev’,

            text: ‘後退’,

            text: ‘Back’,

            handler: navHandler.createDelegate(this, [-1]),

            disabled: true

        },

        ‘-‘,

        {

            id: ‘move-next’,

            text: ‘前進 Next’,

            handler: navHandler.createDelegate(this, [1])

        }

    ],

    // 內面的面板，就是「卡片」 the panels (or “cards”) within the layout

    items: []

});

    var dataFile = [

            {

                pageFile : [

                    {

                        spec : 1,

                        pic : 11,

                        ranged : 111

                    }

                ]

            },

            {

                pageFile : [

                    {

                        spec : 2,

                        pic : 22,

                        ranged : 222

                    }

                ]

            }

    ];

    var _pageFile;

    for (var i = 0; i dataFile.length; i++) {

        _pageFile = dataFile[i];

        //_pageFile =

        card.add({

            id: ‘card-‘ + (i + 1),

            tpl : new Ext.XTemplate(

                ‘table border=”1″‘,

                ‘trtd規格/tdtd圖片/tdtd對白/td/tr’,

                ‘tpl for=”pageFile”‘,

                ‘trtd{spec}/tdtd{pic}-{ranged}/tdtd{dialogue}-{ranged}/td/tr’,

                ‘/tpl’,

                ‘/table’

            ),

            listeners : {

                ‘render’ : function(panel){

                    console.log(this);

                    this.tpl.overwrite(this.body, this.initialConfig.pageFile);

                }

            },

            scope : this,

            pageFile : _pageFile

        });

    }

    card.render(document.body)

使用ExtJS編寫的餅狀圖中間的步驟問題。

打開電子表格，（EXCEL）把相應的數據輸在表格里。在表格上找到一個像「樓房」一樣的圖標叫「圖表嚮導」點一下以後，按提示操作即可。

如果數據多，可以導入。

extjs 表格編輯，動態顯示列怎麼弄

這裡說的應該是excel動態圖表下拉顯示列，操作方法如下：

1.製作包含了相關數據的Excel表格，以下以一份銷售簡表為例，說明該技巧的詳細思路。

2.選擇單元格A20（也可以是其他空白單元格），單擊菜單欄「數據」→有效性」，打開「數據有效性」對話框，在「設置」選項卡下，「允許」的下拉菜單中，選擇「序列」，在「來源」中，選擇或輸入來源位置（本例為$A$3：$A$16），確定之後，即可以為A20單元格建立下拉列表。

3.選擇A20單元格的相鄰單元格B20，輸入公式=VLOOKUP($A$20,$A$3:$H$16,COLUMN(),)，回車後，選擇B20單元格拖動右下角的填充柄將公式填充至H20。此時通過選擇A20單元格的下拉菜單，選擇不同的產品，會顯示該產品的具體詳細信息。

PS：VLOOKUP函數是一個查找函數，其基本解釋是：在參數2（本例為$A$3:$H$16）首列中，垂直查找（按行查找）參數1（本例為$A$20），並返回參數3指定的第n列中相同行的數據，參數4為查找方式，參數4為0或省略或為FALSE時，表示精確查找，為1或者TRUE時表示模糊查找。

COLUMN為列函數，COLUMN（）表示返回當前單元格的列號。

4.選定A20：H20單元格區域作為圖表的數據源，單擊「插入」→圖表」，打開「圖表嚮導」對話框，按提示進行設置，製作好圖表，需要不同產品的相關數據時，只需在A20單元格的下拉菜單中選擇即可。該圖表實現了隨不同的對象而變化，可讀性和可視效果都大大提高。