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
});