一、 Extjs简介

Extjs的简单使用_java

 ExtJS用来开发富客户端的JS框架, 主要用于创建前端用户界面, 与后台技术无关, 后台可以任何开发语言。

最初由开发人员JackSlocum开发, 通过参考JavaSwing等机制来组织可视化组件,已经发展好几年,算是非常成熟的JS客户端技术精品。

开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

二、 如何使用Extjs

首先是为每一个页面定义一个类,再以EXTJS的规范格式增加所需的元素,可以使用所见所得的工具:extbuilder来操作,这个类将以XXXXX.js的文件名保存,最后在相应的HTML页面中引入相关的JS和CSS文件:

Extjs的简单使用_java_02

并在BODY中加入下面这段JAVA SCRIPT:

Extjs的简单使用_java_03

其中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();
});

效果如下所示:

Extjs的简单使用_java_04