extjsdocument

⑴ 請問Extjs如何獲取html內容,謝謝

如圖所示

要獲取html內容，需要先獲取dom對象

Ext使用query類選擇器就能獲取，由於獲取的是集合，所以如果只有一個，就是數組下標0的對象。

故，html文本用Ext.query('.xxx')[0].innerHTML 獲取

html文本用Ext.query('.xxx')[0].outerHTML 獲取

⑵ extjs函數調用方法

一、獲取元素（Getting
Elements）
1.Ext.get
var
el
=
Ext.get('myElementId');//獲取元素，等同於document.getElementById('myElementId');//會緩存
2.
Ext.fly
var
el
=
Ext.fly('myElementId')//不需要緩存。
註：享元模式（Flyweight
Design
Pattern）是一種節省內存的模式，該模式的大概原理是建立單個全體對象然後不斷反復使用它。
3.Ext.getDom
var
elDom
=
Ext.getDom('elId');
//
依據id來查dom節點
var
elDom1
=
Ext.getDom(elDom);
//
依據dom節點來查dom節點
二、CSS元素
4.addClass
Ext.fly('elId').addClass('myCls');
//
加入元素的'myCls'的樣式
5.radioClass
Ext.fly('elId').radioClass('myCls');//添加一個或多個className到這個元素，並移除其所有側邊（siblings）節點上的同名樣式。
6.removeClass
Ext.fly('elId').removeClass('myCls');
//
移除元素的樣式
7.toggleClass
Ext.fly('elId').toggleClass('myCls');
//
加入樣式
Ext.fly('elId').toggleClass('myCls');
//
移除樣式
Ext.fly('elId').toggleClass('myCls');
//
再加入樣式
8.hasClass
if
(Ext.fly('elId').hasClass('myCls'))
{//判斷是否已加上這個樣式
//
是有樣式的
}
10.replaceClass
Ext.fly('elId').replaceClass('myClsA',
'myClsB');//替換樣式
11.getStyle
var
color
=
Ext.fly('elId').getStyle('color');//返回該元素的統一化當前樣式和計算樣式。
var
zIndx
=
Ext.fly('elId').getStyle('z-index');//返回該元素的統一化當前樣式和計算樣式。
12.setStyle
Ext.fly('elId').setStyle({
display
:
'block',
overflow
:
'hidden',
cursor
:
'pointer'
});//設置元素的樣式，也可以用一個對象參數包含多個樣式。
13.getColor
Ext.fly('elId').getColor('color');//為指定的CSS屬性返回CSS顏色
14.setOpacity
Ext.fly('elId').setOpacity(.45,
true);//設置元素的透明度。
15.clearOpacity
Ext.fly('elId').clearOpacity();//清除這個元素的透明度設置

⑶ ExtJS 中JS頁面如何調用另外一個XX.jsp頁面javascript中的方法

ExtJS 中JS頁面是不可以跨jsp頁面去調用jsp頁面的js方法的。需要把js函數寫到extjs才可以調用。
DJSLoader=function(){
this.init=function(opt){};
this.JS=new Array();
this.loadJS=function(file,path){
path=path?path:'';
var script=document.getElementsByTagName("script");
var i,j;
for (i=0,j=script.length;i<j;i++){
if (script[i].getAttribute("src") == (path+file)){
return;
}
}
var _script=document.createElement("script");
_script.type="text/javascript";
_script.src="test.js";
var st=new Object();
st.file=file;
st.path=path;
st.loaded=false;
this.JS.push(st);
_script.onload=function(obj){
obj.setJSStatus(file,true,path);
}.createDelegate(_script,[this]);
_script.onreadystatechange=function(obj){
if ( this.readyState=='loaded' || this.readyState=='complete' ) {
obj.setJSStatus(file,true,path);
}
}.createDelegate(_script,[this]);
document.getElementsByTagName("head")[0].appendChild(_script);
};
以上方法調用完成後，要調用的js文件已經載入到當前extjs頁面了，那麼就可以直接調用了。

⑷ extjs刷新頁面如何刷新整個頁面

樓主所說的要求可以通過再次載入Store達到，store.reload();
當然，store對應的參數需要進行修改，不然頁面不會變

⑸ ExtJS Ext.get和Ext.getCmp的區別

ExtJS Ext.get和Ext.getCmp的區別如下：

拓展：

Ext.getCmp()和Ext.getDom()的區別：

Ext.getCmp()：獲取控制項在Ext框架裡面的對象。

Ext.getDom()：獲取原生的dom對象，類似於document.getElementById()；

⑹ extjs 怎麼手動改變form items的值

Extjs 中掘辯並Ext.form和Ext.form.field包定義了表單中常灶神用的控制項，通過控制項的get/set方法可以設置from items的值。
以textfield即Ext.form.field.Text為例，設置值方法為setValue( value );其他的控制項亦可以找到相應的方判跡法，請參看具體的Extjs document。

⑺ extjs函數調用方法

當前this所引用的作用域已經改變了,可簡單修改為
init: function() {
var me = this;//保存作用域
this.control({
'userlist textfield[id=searchId]':{
keyup:function(textfield, e){

if (e.getKey() == 13) {
me .searchUserByEnter(textfield); //調用原作用域方法
}
}
}
}
規范點可參照extjs寫成scope參數控制this

⑻ ExtJS開發實戰的目錄

《extjs開發實戰》
第 1 章 入門 1
1.1 何謂extjs 2
1.2 cakephp 5
1.3 部署開發環境 5
1.3.1 部署伺服器 6
1.3.2 部署cakephp 6
1.3.3 部署extjs 10
1.4 開發工具 10
1.5 調試與性能評估工具 10
1.5.1 firebug 插件 10
1.5.2 chrome的javascript控制台 12
1.5.3 性能評估與數據監控 12
1.6 小結 14
第Ⅰ部分 基礎架構
第 2 章 extjs 101 17
2.1 javascript的面向對象 18
2.1.1 創建類 18
2.1.2 定義類方法與類屬性 21
2.1.3 類的繼承 22
.2.1.4 extjs在面向對象方面的支持 26
2.1.5 實戰練習：預配置類 33
2.2 瀏談並慶覽器對象模型：bom 35
2.2.1 命名空間 36
2.2.2 用戶代理對象 38
2.2.3 歷史記錄對象 40
2.2.4 dom文件對象document 46
2.2.5 cookie 47
2.2.6 定時調用函數 48
extjs 開發實戰
第 3 章 dom與event 53
3.1 extjs對dom的支持 54
3.1.1 創建element實例 55
3.1.2 通過element創建dom節點 64
3.1.3 讀取/更新dom節點及屬性 72
3.1.4 domhelper與template、xtemplate 85
3.2 extjs對事件的支持 99
3.2.1 一切的開始——ext.ready() 100
3.2.2 注冊/移除事件處理程序 100
3.2.3 ext.eventmanager 102
3.2.4 阻止事件的進行與默認行為 103
3.2.5 ext.util.observable與自定義事件 104
3.3 實戰練習：畫布應用 110
第 4 章含握 好用的php框架——cakephp 119
4.1 cakephp的設計結構 120
4.2 自動化開發 122
4.3 cakephp基礎 130
4.3.1 cakephp的配置文件core.php 130
4.3.2 cakephp的基礎模板default.ctp 132
4.3.3 模型 139
4.3.4 控制器 141
4.3.5 視圖與視圖助手 146
4.4 實戰練習：登錄窗體 148
4.4.1 製作模型 149
4.4.2 編寫控制器 155
4.4.3 編寫頁面視圖 159
4.4.4 更改默認控制器 160
4.4.5 url前綴的應用 162
4.4.6 使用cake 2.*版本? 不，謝謝 163
4.4.7 下一步 164
第 5 章 ajax與數據驅動 165
5.1 ext.ajax與ext.data.connection 166
5.2 存儲對象 179
5.2.1 ext.data.store 181
5.2.2 讀取遠程數據 187
5.3 實戰練習：表格組件 195
第 6 章 component結構 199
6.1 component模型 200
6.2 常用組件 208
6.2.1 colorpalette 調色板 208
6.2.2 button按鈕 209
6.2.3 splitbutton按鈕 211
6.2.4 baseitem基礎選項 212
6.2.5 datepicker日期選擇面板 213
6.3 xtype神秘類型 214
6.4 實戰練習：自定義組件 218
第 7 章 container結構 223
7.1 container容器 224
7.2 panel容器 227
7.2.1 添加子組件/容器 229
7.2.2 移動子組件/容器 231
7.2.3 查找子組件/容器 234
7.2.4 刪除子組件/容器 238
7.2.5 頂層組件欄(tbar)與底層組件欄(bbar) 239
7.2.6 可折疊的panel 240
7.2.7 嵌套panel 241
7.3 viewport容器 244
7.4 window容器 246
7.5 buttongroup容器 250
7.6 button類似容器的用法 253
7.7 實戰練習：更實用的window類 254
extjs 開發實戰
第Ⅱ部分 視圖組件蔽伍
第 8 章 頁面布局 261
8.1 一切都從containerlayout開始 262
8.2 可讓組件大小隨容器改變的anchorlayout 263
8.3 可隨意擺放組件的absolutelayout 265
8.4 填滿容器的fitlayout 268
8.5 如手風琴般的accordionlayout 269
8.6 將組件以撲克牌方式擺放的cardlayout 271
8.7 表單布局formlayout 273
8.8 邊界布局borderlayout 274
8.9 水平布局hboxlayout與垂直布局vboxlayout 276
8.10 列布局columnlayout 276
8.11 表格布局tablelayout 278
8.12 混合布局 279
8.13 實戰練習：自定義布局 282
第 9 章 表單組件 287
9.1 表單容器formpanel與一般容器panel的差異 288
9.2 文本欄位 291
9.2.1 密碼欄位 294
9.2.2 文件上傳欄位 294
9.2.3 文本塊 295
9.2.4 數字欄位 296
9.2.5 欄位驗證 297
9.2.6 隱藏欄位 298
9.3 下拉菜單與自動完成 299
9.3.1 使用本地數據 299
9.3.2 遠程數據與下拉菜單 303
9.3.3 遠程數據與自動完成 307
9.3.4 聯動下拉菜單 308
9.4 wysiwyg文本編輯器 310
9.5 日期欄位 311
9.6 復選組件與單選組件 312
9.7 提交/讀取數據 313
9.8 欄位提示quicktips與quicktip317
9.9 美化表單 320
9.9.1 使用boxcomponent為表單添加自定義html內容 320
9.9.2 使用fieldset集合特定欄位 321
9.10 實戰練習：登錄表單 322
第 10 章 表格組件 329
10.1 gridpanel是如何組成的 330
10.2 創建gridpanel與數據排序 331
10.3 使用pagingtoolbar進行分頁 336
10.4 girdpanel與查詢 339
10.5 自定義繪圖器 342
10.6 通過selectionmodel與gridpanel交互 345
10.7 實戰練習：dtable 348
第 11 章 可編輯表格組件 355
11.1 創建editorgridpanel 356
11.2 更換欄位編輯器與數據交互 358
11.2.1 更換欄位編輯器 358
11.2.2 添加與刪除記錄 360
11.3 使用roweditor 363
11.4 數據的提交與回滾 365
11.4.1 commitchanges()與rejectchanges() 365
11.4.2 同步伺服器數據 367
11.5 使用datawriter 370
11.6 實戰練習：etable 373
第 12 章 dataview與listview 381
12.1 dataview 382
12.1.1 創建數據顯示樣式 382
12.1.2 創建store與xtemplate 383
12.1.3 創建dataview 385
12.1.4 讓dataview可分頁 386
extjs 開發實戰
12.2 listview 387
12.3 屬性設置表propertygrid 389
12.4 實戰練習：數據讀取 392
第 13 章 圖表組件 401
13.1 圖表底層的秘密 402
13.2 折線圖：linechart 405
13.2.1 繪制折線圖 405
13.2.2 修改提示信息 406
13.2.3 添加水平/垂直軸的標題 408
13.2.4 修改圖表風格 409
13.2.5 添加多個序列 411
13.3 柱形圖：columnchart與stackedcolumnchart 413
13.4 條形圖：barchart與stackedbarchart 415
13.5 圓餅圖：piechart 417
13.6 實戰練習：圖表應用 419
第 14 章 樹狀組件 425
14.1 使用靜態數據創建treepanel 426
14.2 讀取伺服器數據 428
14.3 操作節點 432
14.3.1 添加節點 432
14.3.2 刪除節點 438
14.3.3 編輯節點 441
14.3.4 查詢節點 442
14.3.5 排序節點 443
14.4 columntree 444
14.5 實戰練習：treeeditor 447
第 15 章 菜單與工具欄 453
15.1 創建菜單 454
15.1.1 菜單101 454
15.1.2 菜單事件 456
15.1.3 加入separator與textitem457
15.1.4 colormenu與datamenu 459
15.1.5 添加復選框 460
15.1.6 添加單選按鈕 462
15.2 使用上下文菜單 463
15.3 創建工具欄 465
15.4 實戰練習：復雜的菜單與工具欄組合 467
第 16 章 拖放——drag與drop 473
16.1 拖放的基礎知識 474
16.2 拖放操作的實現 476
16.2.1 注冊dom元素為dd 477
16.2.2 使用ddtarget注冊放置目標 478
16.2.3 使用ddproxy 484
16.3 實戰練習：將拖放與組件結合 487
16.3.1 dataview與拖放 487
16.3.2 treepanel與拖放 493
第 17 章 插件 495
17.1 繼承的限制 496
17.2 插件的實現 499
第 18 章 長路漫漫——extjs 4 503
18.1 類系統 504
18.1.1 定義類的新方式 504
18.1.2 動態讀取類定義與依賴性管理 508
18.1.3 混合屬性 513
18.1.4 靜態方法 515
18.1.5 自動生成變數的getter/setter方法 516
18.2 data 封包 517
18.2.1 model 517
18.2.2 proxy與store 523
18.3 panel、formpanel、gridpanel與window 537
18.3.1 panel組件 537
18.3.2 formpanel組件 539
extjs 開發實戰
18.3.3 gridpanel組件 541
18.3.4 window組件 543
18.4 圖表組件 545
18.4.1 area圖表 545
18.4.2 bar圖表 548
18.4.3 radar圖表 551
18.4.4 pie圖表 552
extjs 4後記 554
第Ⅲ部分 實戰案例
第 19 章 案例——記賬系統 557
19.1 系統需求分析 558
19.2 系統規劃 558
19.2.1 界面規劃 558
19.2.2 後台伺服器部署 560
19.3 系統實現 561
19.3.1 實現cakephp端 562
19.3.2 實現extjs界面 578
19.4 與cakephp結合 611
第 20 章 案例——人人網應用程序 615
20.1 系統功能分析 616
20.2 系統部署 618
20.3 封裝google maps api的類gmap 621
20.4 組合界面組件 629
20.4.1 定義geomappanel 629
20.4.2 定義functionmenu 630
20.4.3 定義georecordgridpanel 632
20.4.4 定義mainpanel 636
附 錄 學習與實現資源 645

⑼ Extjs如何動態載入Extjs腳本

1、首先，需要先創建一個基本可用的 ExtJS 模板， 這個很簡單， 如下所示：
<!DOCTYPE html>

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://localhost/ext-4/resources/css/ext-all.css" />
<script type="text/javascript" src="http://localhost/ext-4/ext-debug.js"></script>
</head>
<body>

</body>
</html>

2、需要引用的腳本是 ExtJS 根目錄下的 ext-debug.js ， 不是 ext-all-debug.js， 這個文件非常小， 只有幾百K ， 當讓這個只是最基本的 ExtJS 組件， 不包括任何的界面功能。

3、配置 Ext.Loader 啟用動態載入；

4、ExtJS 中的動態載入是由 Ext.Loader 來完成的， 默認不啟用動態載入， 所以接下來需要做的事配置 Ext.Loader 啟用動態載入， 在上面模板的 body 標簽內添加如下代碼：

<script type="text/javascript">
Ext.onReady(function() {
Ext.Loader.setConfig({
enabled : true,
disableCaching: false,
paths : {
Ext : '/ext-4/src'
}
});
});
</script>

注意：上面的代碼啟用了動態載入， 禁用了瀏覽器緩存， 以及指定了 ExtJS 的所部署的路徑。

⑽ extjs 如何實現拖拽

簡單的extjs自帶的例子里有，如果負責的需要你要自定義，給你給例子作為參考

需要實現兩個drag、drog兩個類
給你個例子參考
/*
*************************************************************************
*控制控制項拖出
*
************************************************************************
*/
Ext.define('Mocoolka.ux.MKPanelDrag', {
extend: 'Ext.dd.DragZone',

/**
* @Property mkdrag
* 如果組名指定,拖落發生在同組名之間，不同組名不能落
*/
ddGroup: 'mkdrag',
constructor: function () { },

/**
* @method init
* MKPanelDrag的構造方法，必須在panel渲染後調用
* @param {Object} panel 關聯的panel
* @private
*/
init: function (panel) {

if (panel.nodeType) {
Mocoolka.ux.MKPanelDrag.superclass.init.apply(this, arguments);//調用祖類init

} else {
if (panel.rendered) {//已渲染
Mocoolka.ux.MKPanelDrag.superclass.constructor.call(this, panel.getEl());//調用祖類構造方法
} else {//未渲染
panel.on('afterrender', this.init, this, { single: true });//增加事件
}
}
},
/**
* @method afterDragOver
* 拖動完成後觸發
* @param {Object} target panel落下的目標
* @private
*/
afterDragOver: function (target, e, id) {

},
scroll: false,

/**
* @method afterDragOver
* 在滑鼠按下時觸發這個方法，判斷目標是否可以拖動
* 如果可以拖動，收集可拖動對象的數據，返回包含我們指定數據的對象
* ddel屬性是一個提供拖動對象視圖的dom節點
* @param {Object} target panel落下的目標
* @private
*/
getDragData: function (e) {

var t = e.getTarget(".button-draggable");//判斷目標是否可以拖動

if (t) {
e.stopEvent();

//Opera應急代碼
if (Ext.isOpera) {
Ext.fly(t.getEl()).on('mousemove', function (e1) {
t.style.visibility = 'hidden';
Ext.defer(function () {
t.style.visibility = '';
}, 1);
}, null, { single: true });
}

//得到目標對象,建立一個ddel
var f = Ext.getCmp(t.id);

var d = document.createElement('div');

d.className = 'x-form-text';
d.appendChild(document.createTextNode(f.text));
Ext.fly(d).setWidth(f.getEl().getWidth());
return {
field: f,
ddel: d
};
}
},

/**
* @method getRepairXY
* 當落失敗時，提供回到原來位置的坐標
* @private
*/
getRepairXY: function () {
return this.dragData.field.getEl().getXY();
}
});
/*
*************************************************************************
*編輯窗體拖動落區域控制
*
************************************************************************
*/
Ext.define('Mocoolka.ux.MKFieldDropZone', {
extend: 'Ext.dd.DropZone',
xtype: 'MKFieldDropZone',
constructor: function (cfg) {

cfg = cfg || {};

},
/**
* @method init
* MKFieldDropZone的構造方法，必須在panel渲染後調用
* @param {Object} panel 關聯的panel
* @private
*/
init: function (panel) {
var me = this;

if (panel.nodeType) {

Mocoolka.ux.MKFieldDropZone.superclass.init.apply(this, arguments);
} else {
if (panel.rendered) {//如果渲染

Mocoolka.ux.MKFieldDropZone.superclass.constructor.call(this, panel.getEl());//調用祖類構造方法
//控制控制項不能選擇
//var i = Ext.fly(panel.getEl()).select('input');
//i.unselectable();
//var i1 = Ext.fly(panel.getEl()).select('textarea');
//i1.unselectable();
} else {

panel.on('afterlayout', me.init, me, { single: true });
}
}
},
/**
* @Property ddGroup
* 如果組名指定,拖落發生在同組名之間，不同組名不能落
*/
ddGroup: 'mkdrag',

/**
* @Property containerScroll
* 如果滑鼠落在屏幕邊緣，容器是否自動滾動
*/

containerScroll: true,
/**
* @method getTargetFromEvent
* 判斷落下的目標，返回目標。這里的判斷順序是inpt、textarea、button-draggable、panel本身
* @param {Object} e 目標容器，包含多個
* @private
*/
getTargetFromEvent: function (e) {

var me = this;

var panel = e.getTarget('input');

if (panel)
return panel;
var panel = e.getTarget('textarea');

if (panel)
return panel;
panel = e.getTarget('fieldset');
if (panel)
return panel;

panel = Ext.getCmp(this.id);
panel = panel.down('mkeditpanel');
if (panel)
return panel;

},

/**
* @method getTargetFromEvent
* 當拖動對象進入panel時觸發這個方法，判斷是否可以落下,如果可以落下，對落下目標加樣式
* @param {Object} e 目標容器，包含多個
* @private
*/
onNodeEnter: function (target, dd, e, dragData) {

delete this.dropOK;
if (!target) {

return;
}

this.dropOK = true;

if (target.xtype == "mkeditpanel") {
}
else {
Ext.fly(target).addCls("mk-drop-target-active");
}

},

/**
* @method onNodeOver
* 當拖動對象在panel上時觸發這個方法，返回是否能落下
* @param {target} e 目標容器，包含多個
* @private
*/
onNodeOver: function (target, dd, e, dragData) {
return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
},

/**
* @method onNodeOut
* 當拖動對象離開在panel上時觸發這個方法,移除落目標樣式
* @param {target} e 目標容器，包含多個
* @private
*/
onNodeOut: function (target, dd, e, dragData) {

if (target.xtype == "mkeditpanel") {
}
else {
Ext.fly(target).removeCls('mk-drop-target-active');
}
},
/**
* @method onNodeOut
* 當拖動對象落下時觸發這個方法,移除落目標樣式
* @param {target} e 目標容器，包含多個
* @private
*/
onNodeDrop: function (target, dd, e, dragData) {

dd.afterDragOver = function () {

};
var view;
if (dragData.view)
view = dragData.view;
else
view = dragData.field;
var view = view.up("mkdefineeditpanel");
var me = view.down("mkeditpanel");//得到設計船體對象

var panel = me;

if (this.dropOK) {//如果可以落

var t = target;

if (t) {

var end = true;
if (me.dragend == false)//是否放置在當前組件前
end = false;
e.stopEvent();

var iscolumn = false;
var field = null;
var sourcedata;

if (t.xtype == 'mkeditpanel') {//如果目標是設計窗體

}
else {//如果是輸入組件

}

me.begintask();//重繪屏幕

return true;

}

return false;
}
},

onCellDrop: Ext.emptyFn
});