篇一 :ExtJS学习总结

ExtJS学习总结

一、开发时必须要引入的库

1、 ext-all.js:是EXTJS的核心库,是必须要引入的。

2、 ext-core.js:也是EXTJS的核心库,是必须要引入的。

3、 ext-all-debug.js:是ext-all.js的调试版本,在调试时需要使用到。

4、 ext-core-debug.js:是ext-core.js的调试版本。

二、EXTJS程序运行时,需要载入2个JS和一个CSS文件

1、adapter\ext\ ext-base.js

2、ext-all.js

3、resources\css\ ext-all.css

三、ExtJS组件配置方式

1、 使用逗号分隔参数列表配置组件

2、 使用JSON对象配置组件

四、Ext.Element

你可以使用Ext.get方法创建Ext.Element的实例,达到封装普通的HTMLElement之目的。例如你有一个id名为“myElementId”的元素,便可以这样获取:

var el = Ext.get('myElementId');

五、FireDebug调试

var el = Ext.get('myElementId');

console.dir(el);

console.dir命令由Firebug提供,执行该方法可方便地列出某个对象身上有什么成员,这都是例于开发者阅读的形式显示的

var el = Ext.get('myElementId');

el.addClass('error');

这段代码作用后段落的字体颜色就变为红色,页面的CSS规则有error的样式类,属于error类的元素就会有红色效果:

.error {

color: red;

}

六、Ext.get和Ext.fly方法

…… …… 余下全文

篇二 :Extjs Dwr学习总结

Hibernate Spring注解应用

Hibernate Spring使用注解方式配置bean时,不用在xml文件中配置bean以及注入属性之类。。

1实体类注解

@DataTransferObject //DWR 注释,告知 DWR 此类可以自动整理,并作为 Ajax 响应的一部分发送

@Entity //说明是hibernate实体类

@Table(name = "company")//指定表名

2 主键注解

@Id //标识id

@GeneratedValue(strategy = IDENTITY)//id生成策略

@Column(name="id",nullable=false)//列

3列注解

@Column(name="name",nullable=false)//列注解需要加在属性的get方法上

4spring注解

@Repository //标签是用来给持久层的类定义一个名字,让Spring根据这个名字关联到这个类。

@Service//@Service是用于服务层的IServiceImpl类文件,功能与@Repository类似 @Scope("prototype")//定义默认的组件上下文

@Autowired//用来注入属性

@Resource //@Resource 的作用相当于 @Autowired,只不过 @Autowired 按 byType 自动注入,面 @Resource 默认按 byName 自动注入

5dwr注解

@RemoteProxy表示这个类将用于远程方法,而使用

@RemoteMethod指定所要暴露的方法,没有使用@RemoteMethod的方法将不会显示在客户端 @DataTransferObject对应于原来dwr.xml文件中的convert标签,用于转换Java对象;@RemoteProperty则对应于convert标签中的 <param name=”include” value=”" />。

…… …… 余下全文

篇三 :extjs总结

1. 在项目中使用ext,需要自己整理一下,因为发布包里的内容并非都是必须的,必需内

容至少应包括:ext-all.js、adapter/ext/ext-base.js、bulid/locale/ext-lang-zh_CN.js和整个resource目录。注意导入顺序。

2. extjs中e是event 主要就是保存event事件信息的参数

el是element 容器的意思,文件物件模型(Document Object Model,简称DOM),

3.Ext.onReady()可以保证它里面的内容会在所有的HTML元素都加载完成后才执行,这样就避免了许多家在顺序导致的问题。

4.表格的列信息包括首部显示文本header、列对应的记录集字段dataIndex、列是否可排序sortable、列的渲染函数renderer、宽度width、格式化信息format等。

3. 面板必须渲染。

面板示例:

var panel=new Ext.Panel({

id:"myPanel",//标识

renderTo:"divPanel",//在哪个元素中渲染

title:"我的面板",

width:400,

height:300,

frame: false,//如果为true 则panel具有全部阴影,否则只有1px边框

//html:"<h1>这是在Panel中的内容...</h1>",

contentEl:'divPanelContent',//此属性可以简写成“el”,显示哪个元素中的内容 draggable:true,//是否允许拖动

collapsible:true,//是否可以折叠

titleCollapse:true,//是否点击整个标题栏都可以收缩

…… …… 余下全文

篇四 :extjs总结

?

??ext‐all.css:这是一个样式表文件,用来控制组件的显示。改文件不需要进行

修改,任何改动将影响日后的升级。如果真的想改动样式的话,可以在引入该样式文件后再做覆盖。

?ext‐base.js:这个文件提供了Ext的核心功能。如果Ext是一部车,它就是车的

引擎。这个文件我们可以修改以用来采用其他的库,如jQuery,让它和Ext共存。

?ext‐all‐bug.js/ext‐all.js:所有的组件都蕴含在这个文件里面。前者用来调试

开发,后者在发布的时候采用。

Ext.onReady:这个函数用来判断页面已经准备好来执行Ext的内容,即用来判断页面是否加载完全;

Ext.Msg:用来产生一个有固定样式的消息窗口;

configuration objects(配置对象):这个函数定义控件将如何展示和工作; Ext.get:这个函数用来访问和控制DOM中的而元素。

Function stapler(){

Ext.Msg.show({

title: 'Milton',

msg: 'Have you seen my stapler?',

buttons: {

yes: true,

no: true,

cancel: true

}

});

}

Ext.onReady(stapler());

这里提几点在使用配置对象时的注意事项:

?配置条目(record)要被花括号包围,每一个括号中的条目都是对象的一部分

——{records};

?每个条目都有属性名和属性值,其间被冒号分割,条目之间靠逗号分割

——{name0: value0, name1: value1};

?条目的属性值可以是任何数据类型,包括布尔型,数组,函数以及对象

——{name0: true, name1: {name2: value2}};

…… …… 余下全文

篇五 :extJs--个人总结

、// 左边功能树

var menuTree = new Ext.tree.TreePanel({

region : 'west',

title : '功能菜单',

width : 180,

minSize : 150,

maxSize : 200,

split : true,

autoScroll : true,

autoHeight : false,

collapsible : true,

rootVisable : false,

// 不显示根节点

root : new Ext.tree.TreeNode({

id : 'root',

text : '功能菜单',

draggable : false,

expanded : true

})

});

// 添加第一个节点(html)

menuTree.root.appendChild(new Ext.tree.TreeNode({

id : 'htmlPanel',

text : '通过html打开',

listeners : {

'click' : function(node, event) {

event.stopEvent();

var n = contentPanel.getComponent(node.id);

if (!n) {

// 判断是否已经打开该面板

n = contentPanel.add({

'id' : node.id,

'title' : node.text,

closable : true,

html : '<div>通过html载入目标页面html代码</div>' // 通过html载入目标页 });

…… …… 余下全文

篇六 :extjs学习笔记

Extjs笔记

用代码练习,做笔记,每个知识点都写代码,都做好笔记 、20xx年4月22日,Extjs4.0正式发布,主要有以下改进:

核心改进:检视框架的架构和重塑其基础。这些变化不单提供了产品性能,还提高了其健壮性。

测试框架:在所有支持的浏览器上对框架进行了持续全面的测试。

类系统:作为Extjs 4架构更新的一部分,引用了一个功能更完整的类系统。

沙盒:在ExtJS历史上,ExjJS 4首次提供了完整的沙盒模式。从ExtJS 4开始,框架不再扩展数组或函数等原生对象,因此,与其它的框架同时加载到页面时,再也不会产生冲突。

应用架构:在ExtJS 4,引入了一个标准化的几乎适合任何ExtJS应用程序的MVC风格的应用架构。使用MVC,开发团队只需要学习一种架构就能理解任何ExtJS 4的应用。 SDK工具:正在测试beta版的Sencha SDK工具,在第一版本中包括了优化工具、生成器和slicer工具。这些工具可让你优化Javascript程序,以确保主题能在IE6正常工作。 全新的图表库:ExtJS4中, 全新的、插件自由的图表库是最激动人心的新功能之一,创建了饼图、线图、面积图、雷达图等等,所有这些都是动画的、易于配置的和可扩展的。 更智能的渲染和布局:引入了新的渲染和布局管道,只有在需要的时候才更新DOM,从而让应用更快。改进了布局本身,删除了FormLayout,意味着你能使用任何布局组合创建最完美的表单。

增压的数据包:ExtJS一个基础性的作品就是数据包。不管你将数据加载到Grid、tree或其它组件,改进的数据包,都比以往更容易。新架构还支持HTML的localStorage,数据流可轻松在你的应用中进出

1、网格

大型数据页面的无限/缓冲滚动功能得到很大改进。同时,对于网格的“锁定”功能,新增了锁定和未锁定两种状态。

2、布局

在布局上,通过避免浏览器回流来加快访问速度(浏览器回流,指浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程)。同时,新增了“边界”

…… …… 余下全文

篇七 :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'); // 移除样式

…… …… 余下全文

篇八 :extJs+2.1学习笔记

ExtJs

学习笔记

目录

1.    ExtJs 结构树.. 2

2.    对ExtJs的态度.. 3

3.    Ext.form概述.. 4

4.    Ext.TabPanel篇.. 5

5.    Function扩展篇.. 7

6.    Ext.data.Store篇.. 10

7.    Ext.data.JsonReader篇一.. 12

8.    Ext.data.JsonReader篇二.. 15

9.    Ext.data.HttpProxy篇.. 19

10.     Ext.data.Connection篇一.. 20

11.      Ext.data.Connection篇二.. 24

12.     Ext.Updater篇一.. 26

13.     Ext.Updater篇二.. 27

14.     JSON序列化篇.. 33

15.     通信篇.. 35

16.     extJs 2.0学习笔记(Ajax篇) 38

17.     extJs 2.0学习笔记(Ext.data序论篇) 39

18.     extJs 2.0学习笔记(Ext.Panel终结篇) 40

…… …… 余下全文