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', { //创建Viewport
	        	layout:'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对象的唯一标识ID
				
				pageSize : 14,//分页:每页14条记录——默认是25条
				
				proxy : {//代理
					type : 'ajax',
					url : 'user!findByProperty',
					
					reader : {//阅读器
						type : 'json',
						root : 'data',//
						totalProperty : 'totalCount'//从数据库中读取的总记录数
					}
				},
				autoLoad : true//自动加载
	});

UserModel.js代码如下

   

// 建立Usermodel
// 建立一个store要使用的 model
    Ext.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要使用的 model
    Ext.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();//json
		
		try {
			response.getWriter().write((
					"{\"totalCount\":" + dao.findAll().size()
					+ ",\",success\":true,\"data\":" + g.toJson(list)
					+ "}"));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.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��session
	public 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 exception
			e.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然后看效果就知道了

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 6、Function类 ………………………… 6 7、Ext.Element类 ………………………… 7 8、Ext.DomQuery类 ………………… 13 9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、Ext.CompositeElementLite类 ……… 16 15、Ext.Fx类 …………………………… 16 16、Ext.KeyNav类 ……………………… 19 17、Ext.KeyMap类 …………………… 19 18、Ext.util.JSON类 ……………………… 20 19、Ext.util.Format类 ………………… 20 20、Ext.util.DelayedTask类 ……………… 20 21、Ext.util.TaskRunner类 …………… 21 22、Ext.util.TextMetrics类 …………… 21 23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、Ext.data.ScriptTagProxy类 ………… 25 31、Ext.data.DataReader类 ……………26 32、Ext.data.ArrayReader类 …………… 26 33、Ext.data.JsonReader类 …………… 26 34、Ext.data.XmlReader类 …………… 27 35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 40、Ext.Action类 ……………………… 35 41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、Ext.form.TriggerField类 ……… 45 53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext.menu.Adapter类 ……………… 51 59、Ext.menu.Item类 ………………… 51 60、Ext.menu.CheckItem类 …………… 51 61、Ext.menu.Separator类 ………… 52 62、Ext.menu.TextItem类 …………… 52 63、Ext.Toolbar类 …………………… 55 64、Ext.Toolbar.Item类 ……………… 56 65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值