一、 Extjs简介
ExtJS用来开发富客户端的JS框架, 主要用于创建前端用户界面, 与后台技术无关, 后台可以任何开发语言。
最初由开发人员JackSlocum开发, 通过参考JavaSwing等机制来组织可视化组件,已经发展好几年,算是非常成熟的JS客户端技术精品。
开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。
二、 如何使用Extjs
首先是为每一个页面定义一个类,再以EXTJS的规范格式增加所需的元素,可以使用所见所得的工具:extbuilder来操作,这个类将以XXXXX.js的文件名保存,最后在相应的HTML页面中引入相关的JS和CSS文件:
并在BODY中加入下面这段JAVA SCRIPT:
其中XXXXX就是之前新加的JS类,则EXT引擎就会以一定的非常漂亮的样式渲染出页面来,并且以后的页面风格要改变,只须更换CSS即可,无须改动页面。
三 Extjs中的grid
先来一个最简单的grid,让小伙伴们见识一下吧,看代码:
Ext.onReady(function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'age', type: 'int' }
]
}); var myStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: "qifei", age: 27 },
{ name: "qeefee", age: 26 }
]
}); var win = Ext.create("Ext.Window", {
title: "gird demo",
width: 300,
height: 200,
layout: "fit",
items: {
xtype: "grid",
store: myStore,
columns: [
{ text: "姓名", dataIndex: "name" },
{ text: "年龄", dataIndex: "age" }
]
}
});
win.show();
});
效果如下所示: