Extjs新手教程代码

目录结构

这两个为Extjs框架代码，可从网上搜索下载

index.html代码如下

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9"><script type="text/javascript" src="Ext4.2/ext-all.js"></script>
<script type="text/javascript" src="Ext4.2/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"href="Ext4.2/resources/css/ext-all-neptune.css"><script type="text/javascript" src="my.js"></script>  </head><body><div id="grid"></div>
</body>
</html>

my.js代码如下

Ext.onReady(function(){Ext.QuickTips.init();Ext.Loader.setConfig({enabled:true});Ext.application({name : 'AM',//全局名称appFolder : "my",//对应目录launch:function(){Ext.create('Ext.container.Viewport', { //创建Viewportlayout:'auto',//自动布局items: {xtype: 'userview',title: 'Users',html : ''}});},controllers:['UserCl']});
});

UserView.js代码如下

Ext.define("AM.view.UserView", {extend : 'Ext.grid.Panel',alias : 'widget.userview',// 别名(widget.~~~)固定写法store : 'UserStore',// 数据源//renderTo : 'grid',// 指定元素的id, 一个DOM元素或现有的元素，这个组件将被渲染成frame : true,// 面板渲染//forceFit : true,//自动填充Panel空白处columns : [ {//columns它定义了在表格中出现的所有列text : '编号',dataIndex : 'id',// 数据来源的定义align : 'center',width : 55,}, {text : '账号',width : 200,dataIndex : 'name',// 数据来源的定义align : 'center',field : {// 文本编辑器xtype : 'textfield',// 默认的文本字段编辑值allowBlank : true// 提供是否非空的文本验证}}, {text : '密码1',width : 155,dataIndex : 'pass',// 数据来源的定义align : 'center',//flex : 1,// 占满剩余的空间field : {// 文本编辑器xtype : 'textfield',// 默认的文本字段编辑值allowBlank : true// 提供是否非空的文本验证}},{text : '查看账号',width : 100,    xtype : 'actioncolumn',  items : [{  icon:'my/view/img/shequ1.png',tooltip : '内容',  handler : function(grid, rowIndex, colIndex) {  var rec = grid.getStore().getAt(rowIndex);alert(rec.get('name'));}  }]  }],tbar : [//Top Bar'的缩略形式。{icon:'my/view/img/add.png',//图片路径xtype : 'button',// 添加按钮text : '添加',id : 'add'}, {icon:'my/view/img/del.png',xtype : 'button',// 删除按钮id : 'delete',//text : '删除',},{xtype : 'label',text : '请输入搜索的账号：'},// 搜素框{xtype : 'textfield',id : 'KeyWord'}, {icon:'my/view/img/shequ1.png',text : '搜索',id : 'sousu'},],plugins : [//插件Ext.create('Ext.grid.plugin.RowEditing', {//可编辑插件saveBtnText : '保存',cancelBtnText : "取消",autoCancel : false,clicksToEdit : 2, // 双击进行修改 1-单击 2-双击 0-可取消双击/单击事件listeners : {edit : function(editor, e) {var myMask = new Ext.LoadMask(Ext.getBody(), {msg : '正在修改，请稍后...',});myMask.show();// 显示组件'正在修改，请稍后...'//提交到后台Ext.Ajax.request({// 修改url : 'user!upDateByEntity',// 向服务器发送请求时默认使用的URL。method : 'POST',// 默认使用的HTTP请求方式。注意，这个配置项是大小写敏感的，所有字母都应该大写timeout : 2000,// 请求的超时时间，单位毫秒。默认为30000。params : {"user.id" : e.record.get('id'),"user.name" : e.record.get('name'),"user.pass" : e.record.get('pass')},//成功后执行的方法success : function(response) {e.record.commit();//myMask.hide();// 隐藏组件'正在修改，请稍后...'Ext.Msg.alert("提示", "执行成功！");}});}}}) ],selType : 'checkboxmodel',// 设定选择模式multiSelect : true,// 是否可以多选(多选框)autoScroll : true,// 自动显示滚动条titleCollapse : true,// 允许通过单击Panel头部的任何位置实现Panel展开和折叠之间的切换height : 500,// 高度width : 600,// 宽度dockedItems : [ {//dockedItems(他是组件)可以被安置在Panel的上方，右方，左方或者下方。xtype : 'pagingtoolbar',//分页组件(这里也可以放按钮等组件)store : 'UserStore',    //数据源dock : 'bottom',        //底部displayInfo : true,     //是否展示信息firstText : '第一页',             //显示第一页按钮快捷提示文本lastText : '最后一页',            //显示最后一页按钮快捷提示文本prevText : '上一页',              //显示上一页按钮快捷提示文本nextText : '下一页',              //显示下一页按钮快捷提示文本refreshText : '刷新',             //显示刷新按钮快捷提示文本beforePageText : '第',           //输入项前的文字afterPageText  : '页   共 {0} 页',//输入项后的文字displayMsg: '第  {0} - {1} 条记录     共  {2} 条记录',// 显示分页状态的消息emptyMsg: "没有数据",              //没有数据时显示的消息} ],initComponent : function() {//自动帮你引进你实例化对象的构成方法等this.callParent(arguments);}});

UserStore.js代码如下

 Ext.define('AM.store.UserStore', {extend: 'Ext.data.Store',model : 'AM.model.UserModel',storeId: 'users',//当前store对象的唯一标识IDpageSize : 14,//分页：每页14条记录——默认是25条proxy : {//代理type : 'ajax',url : 'user!findByProperty',reader : {//阅读器type : 'json',root : 'data',//totalProperty : 'totalCount'//从数据库中读取的总记录数}},autoLoad : true//自动加载});

UserModel.js代码如下

// 建立Usermodel
// 建立一个store要使用的 modelExt.define('AM.model.UserModel',{extend : 'Ext.data.Model',fields : [{name : 'id',  type : 'Integer'},{name : 'name',type : 'string'},{name : 'pass',type : 'string'}]});

UserCl.js代码如下

// 建立Usermodel
// 建立一个store要使用的 modelExt.define('AM.model.UserModel',{extend : 'Ext.data.Model',fields : [{name : 'id',  type : 'Integer'},{name : 'name',type : 'string'},{name : 'pass',type : 'string'}]});

后台结构如下：

UserAction.java代码如下

package action;import java.io.IOException;
import java.util.List;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;
import com.opensymphony.xwork2.ActionSupport;import dao.UserDao;
import entity.User;public class UserAction extends ActionSupport {// ������Ҫ��ҳ����ܵ�ֵprivate String name;private String pass;private Integer id;public int page;public int start;public int limit;public User user;// ʵ�����UserDao dao = new UserDao();User u = new User();// action��Ĭ�Ϸ���public String execute() throws Exception {return SUCCESS;}// ����û�public String say() {u.setName(name);u.setPass(pass);dao.save(u);return SUCCESS;}// ɾ���û�public String delete() {String[] strArray = null;strArray = name.split(",");for (int i = 0; i < strArray.length; i++) {dao.delDate(strArray[i]);}return SUCCESS;}// �޸��û�public String upDateByEntity() {dao.upDate(user);return SUCCESS;}//��ҳ��ģ���ѯpublic void findByProperty(){UserDao dao=new UserDao();HttpServletResponse response = org.apache.struts2.ServletActionContext.getResponse();response.setContentType("text/html;charset=utf-8");// ���ñ���List list= dao.findByProperty(page,limit,name);Gson g=new Gson();//jsontry {response.getWriter().write(("{\"totalCount\":" + dao.findAll().size()+ ",\",success\":true,\"data\":" + g.toJson(list)+ "}"));} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}//setter����public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPass() {return pass;}public void setPass(String pass) {this.pass = pass;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public int getPage() {return page;}public void setPage(int page) {this.page = page;}public int getStart() {return start;}public void setStart(int start) {this.start = start;}public int getLimit() {return limit;}public void setLimit(int limit) {this.limit = limit;}public User getUser() {return user;}public void setUser(User user) {this.user = user;}}

HSessionFactory代码如下

package common.dao;import org.hibernate.HibernateException;
import org.hibernate.Session;
import org.hibernate.cfg.Configuration;/*** Hibrenate��session��ȡ��* * */
public class HSessionFactory {private static String CONFIG_FILE_LOCATION = "hibernate.cfg.xml";//hibrenate�����ļ���·��//������Ĭ��д��(�һ������������ǣ�������������)private static final ThreadLocal<Session> threadLocal = new ThreadLocal<Session>();private  static Configuration configuration = new Configuration();    private static org.hibernate.SessionFactory sessionFactory;private static String configFile = CONFIG_FILE_LOCATION;static {try {configuration.configure(configFile);sessionFactory = configuration.buildSessionFactory();} catch (Exception e) {System.err.println("%%%% Error Creating SessionFactory %%%%");e.printStackTrace();}}private HSessionFactory() {}/*** Returns the ThreadLocal Session instance.  Lazy initialize* the <code>SessionFactory</code> if needed.**  @return Session*  @throws HibernateException*/public static Session getSession() throws HibernateException {Session session = (Session) threadLocal.get();if (session == null || !session.isOpen()) {if (sessionFactory == null) {rebuildSessionFactory();}session = (sessionFactory != null) ? sessionFactory.openSession(): null;threadLocal.set(session);}return session;}/***  Rebuild hibernate session factory**/public static void rebuildSessionFactory() {try {configuration.configure(configFile);sessionFactory = configuration.buildSessionFactory();} catch (Exception e) {System.err.println("%%%% Error Creating SessionFactory %%%%");e.printStackTrace();}}/***  Close the single hibernate session instance.**  @throws HibernateException*/public static void closeSession() throws HibernateException {Session session = (Session) threadLocal.get();threadLocal.set(null);if (session != null) {session.close();}}/***  return session factory**/public static org.hibernate.SessionFactory getSessionFactory() {return sessionFactory;}/***  return session factory** session factory will be rebuilded in the next call*/public static void setConfigFile(String configFile) {HSessionFactory.configFile = configFile;sessionFactory = null;}/***  return hibernate configuration**/public static Configuration getConfiguration() {return configuration;}}

UserDao代码如下

package dao;import java.util.List;import javax.servlet.http.HttpServletResponse;import org.hibernate.HibernateException;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.Transaction;import uitl.ExportDB;import common.dao.HSessionFactory;import entity.User;public class UserDao {//��ȡhibrenate��sessionpublic Session getSession() {return HSessionFactory.getSession();}Transaction tran = getSession().beginTransaction();//��װhibrenate���뷽��public void save(User user) {try {getSession().save(user);tran.commit();} catch (Exception e) {e.printStackTrace();}}//��װhibrenate�޸ķ���public void upDate(User user){try{String hql = "update User r set r.name=?, r.pass=?  where id="+user.getId();System.out.println(hql);//������Query query =getSession().createQuery(hql);query.setString(0, user.getName());query.setString(1, user.getPass());query.executeUpdate();tran.commit();}catch(HibernateException e){e.printStackTrace();}}//��װhibrenateɾ��public void delDate(String user){try{String hql = "delete User where id="+user;System.out.println(hql);//������Query query =  getSession().createQuery(hql); query.executeUpdate();tran.commit();}catch(HibernateException e){e.printStackTrace();}}//(��װ��ҳ������ģ���ѯ)  page���ǵڼ�ҳ   limit����ÿҳ��������¼public List findByProperty(int page,int limit,String name) {ExportDB tool = new ExportDB();//��������ʵ��if(name==null)name="";try {                                                   //��������where name like '%"+tool.getString(name)+"%'String queryString = "from User where name like '%"+tool.getString(name)+"%' order by id desc";Query queryObject = getSession().createQuery(queryString);//hibrenate�ṩ�ķ�ҳ����queryObject.setFirstResult((page-1)*limit);//��ʼλ��queryObject.setMaxResults(limit);//ÿҳ��ʾ�ļ�¼return queryObject.list();} catch (RuntimeException re) {throw re;}}//��ѯ����public List findAll() {try {String queryString = "from User";Query queryObject = getSession().createQuery(queryString);return queryObject.list();} catch (RuntimeException re) {throw re;}}}

User代码如下

package entity;public class User {//��������private Integer id;private String name;private String pass;//�����޲���Ĺ��췽��public User(){}//�����в���Ĺ��췽��public User(Integer id, String name, String pass) {super();this.id = id;this.name = name;this.pass = pass;}//����get�� set����public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPass() {return pass;}public void setPass(String pass) {this.pass = pass;}}

User.hbm.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN""http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<!-- Mapping file autogenerated by MyEclipse Persistence Tools
-->
<hibernate-mapping><class  name="entity.User" table="my_user"><id name="id" type="java.lang.Integer"><column name="id"/><generator class="native"/><!-- 不用管它先！ --></id><property name="name" type="java.lang.String"><column length="150" name="name"/></property><property  name="pass" type="java.lang.String"><column length="500" name="pass"/></property></class>
</hibernate-mapping>

ExportDB代码如下

package uitl;import org.hibernate.cfg.Configuration;
import org.hibernate.tool.hbm2ddl.SchemaExport;public class ExportDB {//������ݿ�public static void main(String[] args) {Configuration cfg = new Configuration().configure();SchemaExport export = new SchemaExport(cfg);export.create(true, true);System.out.println("success");}//ת��public static String getString(String input){String chinese="";try {chinese=new String(input.getBytes("iso-8859-1"),"UTF-8");} catch (Exception e) {// TODO: handle exceptione.printStackTrace();}return chinese;}}

hibernate.cfg.xml代码如下

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE hibernate-configuration PUBLIC"-//Hibernate/Hibernate Configuration DTD 3.0//EN""http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd"><!-- Generated by MyEclipse Hibernate Tools.                   -->
<hibernate-configuration><session-factory><property name="dialect">org.hibernate.dialect.OracleDialect</property><property name="connection.url">jdbc:oracle:thin:@127.0.0.1:1521:orcl</property><property name="connection.username">你的oracle用户名</property><property name="connection.password">你的oracle密码</property><property name="connection.driver_class">oracle.jdbc.driver.OracleDriver</property><property name="myeclipse.connection.profile">RoleS</property><property name="connection.autocommit">true</property><property name="show_sql">true</property><property name="hibernate.hbm2ddl.auto">update</property><mapping resource="entity/User.hbm.xml" /></session-factory>
</hibernate-configuration>

struts.xml代码如下

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""http://struts.apache.org/dtds/struts-2.0.dtd">
<struts><!--<package name="struts2" extends="struts-default" namespace="/"><action name="role" class="action.role"></action></package>--><constant name="struts.dveMode" value="true" /><package name="struts2" extends="struts-default" namespace="/"><action name="user_*" class="action.UserAction" method="{1}"><result name="success">/success.jsp</result></action></package>
</struts>

/success.jsp这个文件大家自己建，最后发布到tomcat然后看效果就知道了

Extjs新手教程代码相关推荐

android代码apkxiazai1,Android基础新手教程——1.10 反编译APK获代替码amp;资源(示例代码)...
Android基础新手教程--1.10 反编译APK获代替码&资源标签(空格分隔): Android基础新手教程本节引言: "反编译Apk".看上去好像好像非常高端的样 ...
Android基础新手教程——1.5.2 Git之使用GitHub搭建远程仓库
Android基础新手教程--1.5.2 Git之使用GitHub搭建远程仓库标签(空格分隔): Android基础新手教程本节引言: 在上一节中.我们学习了怎样使用Git.构建我们的本地仓库.轻 ...
【OpenCV十六新手教程】OpenCV角检测Harris角点检测
本系列文章由@浅墨_毛星云出品.转载请注明出处. 文章链接: http://blog.csdn.net/poem_qianmo/article/details/29356187 作者:毛星云(浅墨) ...
python完全新手教程-Python完全新手教程
Python完全新手教程更新时间:2007年02月08日 00:00:00 作者: Python入门教程FROM:http://www.cnblogs.com/taowen/articles/112 ...
从小白到精通python要多久-超适合小白的python新手教程
python介绍这是我们专门为小白量身打造的Python新手教程,具有如下特点: 全视频,手把手,零起点,项目实例,基于船新的Python 版本. Python是一种计算机程序设计语言.你可能已 ...
hibernate官方新手教程 (转载)
hibernate官方新手教程第一部分 - 第一个Hibernate程序首先我们将创建一个简单的控制台(console-based)Hibernate程序.我们使用内置数据库(in-memory d ...
ROS探索总结（一）（二）（三）：ROS总体框架 ROS总体框架 ROS新手教程
ROS探索总结(一)--ROS简介一.历史随着机器人领域的快速发展和复杂化,代码的复用性和模块化的需求原来越强烈,而已有的开源机器人系统又不能很好的适应需求.2010年Willow Garage公 ...
微信公众平台开发新手教程(图文具体解释)
因为微信的大热.为了更好的方便使用微信的用户查询一些信息.这篇文章是入门级的微信公众平台开发教程,须要的朋友能够參考下在这篇新手教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络 ...
【JS新手教程】LODOP打印复选框选中的任务或页数
之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务) 关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法 ...

Extjs新手教程代码

Extjs新手教程代码相关推荐

最新文章

热门文章