EXT JS 纯页面

合集下载

ExtJS4.1TabPanel动态加载页面并执行脚本

ExtJS4.1TabPanel动态加载页⾯并执⾏脚本知道extjs是很久以前的事情，但是⼀直没有机会⽤到。

不怕⼤家笑话，直到上个星期准备⽤它了，这才开始接触，没想到⼀开始就碰到难题。

TablePanel动态加载页⾯很简单的，官⽅有⽰例，但是我加载的页⾯需要执⾏脚本，为了这个功能，研究了⾜⾜4天。

看来我把extjs想的太简单了，还是需要对它深⼊了解下。

第⼀天，按照官⽅⽰例，可以动态加载页⾯，可是脚本不执⾏，于是查SDK、google，发现scripts需要设置为true，于是设置该属性，整个代码如下tabPanel.add({title: 'dynamic page',closable: true,loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }});刚开始以为加载页⾯的脚本写的有问题，因为查了很多资料，有⼈说要写在<body>⾥⾯，有⼈说只能写在页⾯上，不能⽤src引⽤js⽂件，但⽆论怎么试也不⾏，我的加载页⾯很简单，只要页⾯被加载就出弹窗<script type="text/javascript">alert("addd");</script>后来想，是不是需要在tab被激活的事件⼿⼯load，⽽不是autoLoad，于是再次实验，终于成功了，兴奋！tabPanel.add({title: 'dynamic page',closable: true,loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }listeners: {activate: function(tab){tab.loader.load();}}});本来想着到此为⽌，⼀天时间总算搞定这个tab，但是兴奋之余发现，该做法是有问题的，每次点击tab，都会触发激活事件，去读取后台页⾯⼀次，⽽我想要的效果是，前台加载⼀次之后，切换tab也不要再访问后台。

EXTJS纯页面

EXTJS纯页面function TMPTABLE_open(node) {/*----------参数说明----------方法参数 node ： treepanel 传过来的节点对象----------参数说明----------*///[----------参数定义----------var nodeid = node.attributes.id; //变量：节点IDvar p_tab = center.getItem(nodeid); //变量：根据当前节点ID 得到对应选项卡对象var pageurl = "../Form/TMPTABLE.aspx"; //提交路径配置var pagename = "TMPTABLE"; //页面名称（对应数据库表表名）//----------参数定义----------]//[---------主体----------//判断对应选项卡是否存在存在则激活否则新建if (p_tab) {//激活选项卡面板center.setActiveTab(p_tab);} else {//新建选项卡//[----------参数定义----------]var p_search = ""; //变量：定义查询面板var tbar2 = ""; //变量： grid第二个工具栏用于存放查询面板var gridPageSize = 12; //变量： grid页面大小var p_grid = ""; //变量： grid表格//[----------按钮权限----------//定义按钮显示权限类DisplayBtn = function(config) {this.add = false;this.edit = false;this.del = false;this.output = false;this.print = false;this.search = false;this.add1 = false;Ext.apply(this, config);};//获取按钮权限------同步ajax调用(权限检查放在最前面使用同步AJAX)var conn = Ext.lib.Ajax.getConnectionObject().conn;conn.open("GET", '../Form/DisplayBtn.aspx?page=' + pagename, false);conn.send(null);var displayBtn = new DisplayBtn(Ext.util.JSON.decode(conn.responseText).data);//----------按钮权限----------]//新建查询面板p_search = new Ext.form.FormPanel({region: 'north', //布局labelAlign: 'right', //文本对齐//buttonAlign: 'right', //按钮对齐border: 0,frame: true, //背景阴影layout: "form", //布局collapsed: true,collapsible: true,autoHeight: true,hidden: displayBtn.search,title: "查询",items:[{xtype: "panel", layout: "column", items:[{xtype: "panel", layout: "form", width:250,items:[{name: "txt_machine_id", xtype: "textfield", fieldLabel: "设备名称", emptyT ext: "设备名称" }]},{xtype: "panel", layout: "form", width:350,items:[{name: "txt_agent", xtype:"combo",store: new Ext.data.JsonStore({url: pageurl + "?method=merchant",root: "data",fields: ['text', 'id']}),displayField:"text",valueField:"id",hiddenName: 'txt_agent',mode: 'remote',listWidth: 150,forceSelection:false,//必须选择一个选项blankT ext:'请选择',//该项如果没有选择，则提示错误信息editable:false,disableKeyFilter :false,emptyT ext :"请选择商户",triggerAction: 'all',fieldLabel: "商户"}]},{xtype: "panel",layout: "form",width:300,items:[{xtype:"combo",store: new Ext.data.JsonStore({url: pageurl + "?method=combox",root: "data",fields: ['text', 'id']}),displayField:"text",valueField:"id",hiddenName: 'txt_machine_type',mode: 'remote',width: 110,listWidth: 127,forceSelection:false,//必须选择一个选项blankT ext:'请选择',//该项如果没有选择，则提示错误信息editable:false,forceSelection:true,//必须选择一个选项blankT ext:'请选择',//该项如果没有选择，则提示错误信息disableKeyFilter :true,emptyT ext :"请选择设备类型",triggerAction: 'all',fieldLabel: "设备类型"}]}]}],buttons:[{text: "搜索",iconCls: "find",handler: doQuery},{text: "重置",iconCls: "reset",handler: function() {p_search.getForm().reset();} //重置表单}]});//新建查询面板--end// //grid第二个工具栏// tbar2 = new Ext.Toolbar(// {// hidden: true, //初始隐藏// items: [p_search]//把查询面板添加到此工具栏// }// );//------------grid----------------//--------准备数据-------//代理var proxy = new Ext.data.HttpProxy({ url: pageurl + "?method=list" });//结构映射var record = Ext.data.Record.create([{ name: "listno", type: "string", mapping: "listno" },{ name: "machine_id", type: "string", mapping: "machine_id" }, { name: "machine_type", type: "string", mapping: "machine_type" },{ name: "cause", type: "string", mapping: "cause" },{ name: "merchant_id", type: "string", mapping: "merchant_id" },{ name: "fxtime", type: "string", mapping: "fxtime" },{ name: "yl1", type: "string", mapping: "yl1" },{ name: "yl2", type: "string", mapping: "yl2" },{ name: "causexx", type: "string", mapping: "causexx" },{ name: "num", type: "string", mapping: "num" },{ name: "pjprice", type: "string", mapping: "pjprice" },{ name: "jgprice", type: "string", mapping: "jgprice" },{ name: "sltime", type: "string", mapping: "sltime" },{ name: "remarks", type: "string", mapping: "remarks" },{ name: "operate_id", type: "string", mapping: "operate_id" } ]);//读取器var reader = new Ext.data.JsonReader({ totalProperty: "totalCount", root: "data" },record);//数据var store = new Ext.data.GroupingStore({proxy: proxy,reader: reader,sortInfo: { field: "fxtime", direction: "ASC" },remoteStort: true//开启列排序});//分页时获取查询条件store.on('beforeload', function(store, options) {if (p_search.getForm().findField('txt_machine_id')) {var new_params = {//查询所需参数machine_id:p_search.getForm().findField('txt_machine_id').getValue(), agent: p_search.getForm().findField('txt_agent').getValue(), machine_type:p_search.getForm().findField('txt_machine_typ e').getValue() };Ext.apply(this.baseParams, new_params);Ext.apply(this.baseParams, store.sortInfo);}});store.setDefaultSort('fxtime', "asc"); //默认排序store.load({ params: { start: 0, limit: gridPageSize} }); //加载数据//--------准备数据--------endvar nm = new Ext.grid.RowNumberer(); //行序号列var sm = new Ext.grid.CheckboxSelectionModel(); // add checkbox column 多选框列//列模型listno, machine_id, merchant_id, machine_type, agent, cktime, qytime, whdeadline, dqtime, sytime, remarks, operate_id, yl1, yl2var cm = new Ext.grid.ColumnModel([nm, sm,{ header: "商户名称", dataIndex: "merchant_id", sortable: true },{ header: "设备名称", width: 100, dataIndex: "machine_id", sortable: true },{ header: "设备类型", dataIndex: "machine_type", sortable: true },{ header: "返修类型", dataIndex: "yl2", sortable: true },{ header: "数量", dataIndex: "num", sortable: true },{ header: "返修原因",id: "name", dataIndex: "cause", sortable: true },{ header: "故障现象", dataIndex: "causexx", sortable: true },{ header: "维修用料", dataIndex: "yl1", sortable: true },{ header: "配件费用", dataIndex: "pjprice", sortable: true },{ header: "人员费用", dataIndex: "jgprice", sortable: true },{ header: "受理时间", dataIndex: "sltime", sortable: true },{ header: "返修时间", dataIndex: "fxtime", sortable: true },{ header: "维修人员", dataIndex: "operate_id", sortable: true } ]);cm.defaultSortable = true; //开启列排序//-----------------分页控件-------------var pageToolbar = new Ext.PagingToolbar({store: store,pageSize: gridPageSize,displayInfo: true,displayMsg: "本页显示 {0} - {1}条 , 共 {2} 条",lastText: "尾页",nextText: "下一页",prevText: "上一页",firstText: "首页",refreshText: "刷新",items:["-","每页显示",{xtype: "numberfield",width: 35,minValue: 5,maxValue: 500,value: gridPageSize,allowBlank: false,blankT ext: "不能为空",minT ext: "输入值范围[5-500]",maxText: "输入值范围[5-500]",name: 'name',listeners: {scope: this,specialKey: function(field, e) {if (e.getKey() == Ext.EventObject.ENTER) {//响应回车if (field.isValid() && parseInt(field.getValue()) != gridPageSize) { gridPageSize = parseInt(field.getValue()); pageToolbar.pageSize = gridPageSize; store.reload({ params: { start: 0, limit: gridPageSize} }); }}},'blur': function(field) { if (field.isValid() &&parseInt(field.getValue()) != gridPageSize) { gridPageSize = parseInt(field.getValue()); pageToolbar.pageSize = gridPageSize; store.reload({ params: { start: 0, limit: gridPageSize} }); } } }},"条"],emptyMsg: "没有记录"})//-----------------分页控件-------------】p_grid = new Ext.grid.GridPanel({id: 'grid' + nodeid, //标题ID 取节点IDtitle: node.attributes.text, //标题取节点文本region: 'center', //布局iconCls: "icon-grid", //标题图标closable: true, //显示关闭图标width: 500,//autoHeight: true,cm: cm,sm: sm,// autoExpandColumn: "Name", //自动伸展列列id名loadMask: { msg: '正在加载数据，请稍侯……' }, store: store,trackMouseOver: true,collapsible: true,viewConfig:{//forceFit:true,//所有列都改变宽度//autoFill:true,sortAscT ext: '升序',sortDescText: '降序',columnsText: '显示列',emptyT ext: "没有可显示的数据"tbar:[{ id: "btnAdd", text: "新增", tooltip: "新增", iconCls: "add", disabled: displayBtn.add, handler: doAdd },{ id: "btnEdit", text: "修改", tooltip: "修改", iconCls: "edit", disabled: displayBtn.edit, handler: function() {//获得行数据if (p_grid.getSelections().length == 0) {Ext.MessageBox.alert('提示', '请先选择需要修改的记录');} else {var precord = p_grid.getSelections()[0].json.listnodoEdit(precord);}}},{ id: "btnDel", text: "批量删除", tooltip: "批量删除", iconCls: "delete", disabled: displayBtn.del, handler: doDels },"-",{ id: "btnAuthority", text: "返修原因", tooltip: "查看/设置返修原因", iconCls: "authority", disabled: displayBtn.authority, handler: function() {//获得行数据if (p_grid.getSelections().length == 0) {Ext.MessageBox.alert('提示', '请先选择所需的记录');} else {var precord = p_grid.getSelections()[0];doAuthority(precord.json.listno,precord.json.listno);}}'-',{ id: "btnOutput", text: "导出", tooltip: "导出", iconCls: "output", disabled: displayBtn.output, handler: doOutput }, { id: "btnPrint", text: "预览", tooltip: "预览", iconCls: "print", disabled: displayBtn.print, handler: doPrint },"-",{ id: "btnSearch", text: "查询", tooltip: "查询", iconCls: "search", disabled: displayBtn.search, handler: doSearchShow } ],bbar: pageToolbar,listeners:{"sortchange": function() {store.reload();}}});//添加右键菜单p_grid.on("rowcontextmenu", function(grid, rowIndex, e) {e.preventDefault();if (rowIndex < 0) { return; }var treeMenu = new Ext.menu.Menu([{xtype: "",text: "新增",iconCls: "add",pressed: false,disabled: displayBtn.add,handler: doAdd}, {xtype: "",text: "修改",iconCls: "edit",pressed: false,disabled: displayBtn.edit,handler: function() {//获得行数据var precord = grid.getStore().getAt(rowIndex);//alert(precord.data.agent);doEdit(precord.data);}}, {xtype: "",text: "删除",iconCls: "delete",pressed: false,disabled: displayBtn.del,handler: function() {store.reload();//获得行数据var precord = grid.getStore().getAt(rowIndex);//alert(precord.data.agent);Ext.MessageBox.confirm("提示", "确实要删除所选的记录吗?",function(btn,id){if (btn == "yes") {var Ids = "'"+precord.data.listno+"',";Ext.Ajax.request({url: pageurl + "?method=del",params: { Ids: Ids },success: function(response, options) {Ext.MessageBox.alert("提示", "数据删除成功!"); store.reload(); },failure: function(response, options) {Ext.MessageBox.alert("提示", "数据删除失败!"); }});}});}},'-', {xtype: "",text: "返修原因",iconCls: "authority",pressed: false,disabled: displayBtn.authority,handler: function() {var precord = grid.getStore().getAt(rowIndex); doAuthority(precord.data.listno,precord.data.listno); }}, '-', {xtype: "",text: "导出",iconCls: "output",pressed: false,disabled: displayBtn.output,handler: doOutput}, {xtype: "",text: "预览",iconCls: "print",pressed: false,disabled: displayBtn.print, handler: doPrint}, '-', {xtype: "",text: "查询",iconCls: "search",pressed: false,disabled: displayBtn.search, handler: doSearchShow}]);treeMenu.showAt(e.getXY()); });//-------------grid------------end var ptree = new Ext.tree.TreePanel({ animate: true,rootVisible: false,autoScroll: true,autoHeight: true,width: 300,autoWidth: true,border: false,useArrows: false, singleExpand: true,//lines:true,loader: new Ext.tree.TreeLoader({dataUrl: pageurl + "?method=tree"}), //加载节点数据root: new Ext.tree.AsyncTreeNode({id: "rtroot",text: "所有原因",singleClickExpand: true,expanded: true,checked: false, //是否显示checkboxleaf: false}),listeners: {"checkchange": function(node, state) {if (node.parentNode != null) {//子节点选中node.cascade(function(node) {node.attributes.checked = state;node.ui.checkbox.checked = state;return true;});var pNode = node.parentNode;for (; pNode.id != "rtroot"; pNode = pNode.parentNode) { if (pNode.attributes.checked) {pNode.ui.checkbox.checked = (ptree.getChecked('id', pNode).length > 1);pNode.attributes.checked = (ptree.getChecked('id', pNode).length > 1);} else {pNode.ui.checkbox.checked = (ptree.getChecked('id', pNode).length > 0);pNode.attributes.checked = (ptree.getChecked('id',pNode).length > 0);}}}},"click": function(node, state) {node.toggle();}}});var p_power = new Ext.form.FormPanel( {layout: "form", //布局collapsible: true,title: "返修原因",region: "east",width: 200,autoScroll: true,//frame: true,split: true,labelAlign: 'right', //文本对齐buttonAlign: 'center', //按钮对齐hidden: displayBtn.authority,items:[ptree],tbar:[{text: "保存返修原因", id: "usertree_save", disabled: true, iconCls: "save", handler: function() {mask.show();//Ext.MessageBox.alert("提示", rooltree_ckid);var menuids = rooltree_ckid + ":";// alert(rooltree_ckid);Ext.each(ptree.getChecked('id', ptree.getNodeById('rtroot')), function(n) {menuids += n + ",";// alert(n);});menuids += "0";// Ext.MessageBox.alert("提示", menuids);alert(menuids);Ext.Ajax.request({url: pageurl + "?method=setPower",params: { Ids: menuids },success: function(response, options) {mask.hide();Ext.MessageBox.alert("提示", "返修原因保存成功!");store.reload();},failure: function(response, options) {Ext.MessageBox.alert("提示", "返修原因保存失败!");mask.hide();store.reload(); }});}}]});//-------------tabPanel------------p_tab = new Ext.Panel({id: nodeid,title: node.attributes.text,iconCls: "icon-4", //标题图标closable: true, //显示关闭图标layout: 'border',items: [p_search, p_grid, p_power]});center.add(p_tab);center.setActiveTab(p_tab);//-------------tabPanel------------var p_form = new Ext.form.FormPanel( {layout: "form", //布局autoHeight: true,title: "请仔细填写表单",frame: true,labelAlign: 'right', //文本对齐buttonAlign: 'center', //按钮对齐items:[////{xtype: "panel",layout: "column",items:[{xtype: "panel",layout: "form",width:350,items:[{id: "txtmachine_id", name: "txtmachine_id", xtype: "textfield", allowBlank: false,blankT ext: "不能为空", width: 220,fieldLabel: "设备名称", emptyT ext: "设备名称"}]},{xtype: "panel",layout: "form",width:350,items:[{xtype:"combo",store: new Ext.data.JsonStore(url: pageurl + "?method=combox",root: "data",fields: ['text', 'id']}),displayField:"text",valueField:"id",hiddenName: 'txtmachine_type',mode: 'remote',width: 220,readOnly:true,allowBlank: false,forceSelection:false,//必须选择一个选项blankT ext:'请选择设备类型',//该项如果没有选择，则提示错误信息editable:false,disableKeyFilter :true,emptyT ext :"请选择设备类型",triggerAction: 'all',fieldLabel: "设备类型"}]}]},{xtype: "panel",layout: "column",items:[xtype: "panel",layout: "form",width:350,items:[{name: "txtagent",xtype: "textfield", maxLength:20,width: 220,fieldLabel: "维修人员",emptyT ext: "维修人员"}]},{xtype: "panel",layout: "form",width:350,items:[{id: "txtnum",name: "txtnum",xtype: "numberfield",width: 220,value:1,fieldLabel: "数量", emptyText: "1" }}]},{xtype: "panel",layout: "column",items:[{xtype: "panel",layout: "form",width:350,items:[{name: "txt_sltime",xtype: "datefield",width: 220,readOnly: false,value: new Date(),format: 'Y-m-d',fieldLabel: "受理时间", emptyText: "受理时间" } ]},{xtype: "panel",layout: "form",width:350,items:{name: "txt_cktime",xtype: "datefield",width: 220,readOnly: false,value: new Date(),format: 'Y-m-d',fieldLabel: "维修时间", emptyText: "维修时间" }]}]},{xtype: "panel",layout: "column",items:[{xtype: "panel",layout: "form",width:350,items:[{name: "txtpjprice", xtype: "numberfield", width: 220, fieldLabel: "配件费", emptyText: "100"}]{xtype: "panel",layout: "form",width:350,items:[{name: "txt_rgprice", xtype: "numberfield", width: 220, fieldLabel: "人工费", emptyText: "100"}]}]},{xtype: "panel",layout: "column",items:[{xtype: "panel",layout: "form",width:350,items:[{xtype:"combo",store: new Ext.data.JsonStore({url: pageurl + "?method=merchant",root: "data",fields: ['text', 'id']}),displayField:"text",valueField:"id",hiddenName: 'txtmerchant_id',mode: 'remote',width:220,allowBlank: false,forceSelection:true,//必须选择一个选项blankT ext:'请选择商户',//该项如果没有选择，则提示错误信息editable:false,disableKeyFilter :false,emptyT ext :"请选择商户",triggerAction: 'all',fieldLabel: "商户"}]} ,{xtype: "panel",layout: "form",width:350,items:[{。

ExtJS 配置和表格控件使用

ExtJS 配置和表格控件使用ExtJS是一套AJAX控件，本人认为，它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了。

ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。

如果您的项目对网页响应时间有严格的限制，或者客户端操作系统过于陈旧，一定不要选择ExtJS。

本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。

目前最新版本为3.0，但是本文主要介绍2.2版本。

一、 ExtJS下载以及配置1、下载地址：/(这是官网，大家可以选择自己喜欢的版本下载)2、配置过程，假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码)，配置过程如下：(1) 新建一个页面文件Helloworld.html(2) 在<head>和</head>之间添加如下代码：代码如下:<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><script type="text/javascript" src="../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){Ext.MessageBox.alert('HelloWorld','Hello World');})</script>(3) 这里注意<script></script>不能用</script>取代(4) js的导入顺序不要更改(3) 如果弹出一个HelloWorld的对话框，则代表配置成功。

ExtJs分页显示示例原理详解

ExtJs分页显示示例原理详解Ext Js分页显示示例原理详解前几天我们项目组讨论给**公司关于**产品做一个功能展示的用例。

讨论到view层时，用那种框架。

最终选中了大名鼎鼎的EXT JS 框架来做view。

这里的view涉及的不是很复杂。

因为它仅仅是个Demo。

最常用的就是分页显示数据了。

目前extjs仅仅支持xml和json两种格式的数据展现。

就性能而言。

Extjs不可能用于较大的项目。

性能确实不敢恭维。

这里我们仅仅简单的介绍一下它的分页原理。

其实他的源码中提供了大量的例子。

可以参考一下。

该例子就是基于它的官方例子实现的。

目前，市场是比较流行的数据关于extjs就是“深入浅出extjs“了，该书编写的却是不怎么样。

如果想学习extjs，最好研究研究它的源码的例子就行了。

Jar包如下：其中json-lib-2.2.1-jdk1.5.jar xstream-1.3.jar是转换集合类型转换json类型的主要jar包。

测试工程的包路径如下：该示例是用strus2做的mvc。

action类：package action;import bean.Bean;import com.opensymphony.xwork2.ActionSupport;import java.util.ArrayList;import java.util.List;import javax.servlet.http.*;import mons.logging.Log;import mons.logging.LogFactory;import org.apache.struts2.ServletActionContext;import util.ExtHelper;public class DisplayAction extends ActionSupport{private static final Log log=LogFactory.getLog(DisplayAction.class);private static final long serialV ersionUID = 1L;private HttpServletResponse response;private HttpServletRequest request;private int start;private int limit;//表示数据库中数据总条数，用户分页显示private static final long totalResult=100;public String display() throws Exception{List list=new ArrayList();for(int i=0;i<5;i++){bean.Bean bean=new Bean();bean.setId(i);bean.setDetail("detil"+i);bean.setTitle("title"+i);list.add(bean);}String json = ExtHelper.getJsonFromList(totalResult,list);("list转换成json格式的数据开始");(json);response = ServletActionContext.getResponse();response.setContentType("application/xml;charset=UTF-8");response.getWriter().write(json);return null;}}Po类：package bean;public class Bean {private int id;private String title;private String detail;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getTitle() {return title;}public void setTitle(String title) { this.title = title;}public String getDetail() {return detail;}public void setDetail(String detail) {this.detail = detail;}}ExtHelper类：package util;import java.util.ArrayList;import java.util.List;import net.sf.json.JSONObject;import com.thoughtworks.xstream.XStream;import com.thoughtworks.xstream.io.xml.DomDriver;public class ExtHelper {/***list转换成xml*/public static String getXmlFromList(long recordTotal , List beanList) { Total total = new Total();total.setResults(recordTotal);List resultlist = new ArrayList();resultlist.add(total);XStream sm = new XStream(new DomDriver());for (int i = 0; i < resultlist.size(); i++) {Class c = resultlist.get(i).getClass();String b = c.getName();String[] temp = b.split("\\.");sm.alias(temp[temp.length - 1], c);}String xml = "\n" + sm.toXML(resultlist);System.out.println("**********************************"+xml);return xml;}/***list转换成json*/public static String getJsonFromList(long recordT otal , List ListbeanList){TotalJson total = new TotalJson();total.setResults(recordTotal);JSONObject JsonObject = JSONObject.fromObject(total);return JsonObject.toString();}}TotalJson类：package util;import java.util.List;public class TotalJson {private long results;private List items;public List getItems() {return items;}public void setItems(List items) {this.items = items;}public long getResults() {return results;}public void setResults(long results) {this.results = results;}}Struts.xml'/dtds/struts-2.0.dtd'>。

Extjs客户端浏览图片并显示

EXTJS客户端浏览图片并显示一、项目背景根据项目需要，前台使用EXTjs开发，用户能够自己选择需要的图片，并且显示在页面上，然后把选择的图片上传的Oracle数据库中的Blob字段中。

（关于图片上传功能请详见本人的另一篇文档《使用EXTJS和JA VA 对Oracle中的blob类型图片进行存取.doc》，这里不再详述）二、效果截图1、打开网页，显示默认图片2、选择图片3、显示选择图片三、代码在工程里新建一个JS文件，把下面的代码复制过去就可以使用了/** @author beau4122* 照片保存*/Ext.onReady(function(){var proj=new Ext.global.ProjtNam();var projtnam=;var currentLogoPath='../images/run.jpg';//默认照片目录var formRL = new Ext.FormPanel({title: '照片保存',labelAlign: 'right',frame: true,renderTo:'formRL', bodyStyle: 'padding:0 10px 0;', height: 400,width: 600,buttonAlign: 'center', items: [{height: 10},{layout: 'column',items:[{columnWidth:.3},{columnWidth:.7,layout: 'form',items:[{xtype : 'box',id : 'logoPic',width : 150,height : 200,autoEl : {tag : 'img',src : currentLogoPath,style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoad er(sizingMethod=scale);'}}]}]},{height: 85},{xtype : 'textfield',id : 'logoFile',name : 'logoFile',inputType : 'file',fieldLabel : '浏览图片地址',width : 390,listeners : {'render':function(){var logoFileCmp = Ext.get('logoFile');logoFileCmp.on('change',function(field,newV alue,oldV alue){var picPath = logoFileCmp.getV alue();var url = 'file:///' + picPath;if(Ext.isIE){var image = Ext.get('logoPic').dom;image.src = '../ext/resources/images/default/s.gif';image.filters.item("DXImageTransform.Microsoft.AlphaImage Loader").src = url;}else{//支持FFExt.get('logoPic').dom.src=Ext.get('logoFile').dom.files.item(0).getAsDataURL();}},this);}}}],buttons: [{text:'保存',handler: savePhoto}]})function savePhoto(){Ext.lib.Ajax.request('POST','../SavePic',{success: function(response){},failure: function(response) {}})} })。

extjs中文说明

EXT 中文手册开发必备该文档内容取自互联网，详细的介绍了EXT的各部分内容，希望对大家有所帮助pjq2008-5-25EXT 中文手册EXT 中文手册pjq 收集整理22008EXT 中文手册前言本手册所有内容均粘贴自互联网，如有错误，请多见谅。

EXT 中文手册EXT 中文手册pjq 收集整理32008目录EXT 中文手册 (1)EXT 简介 (5)目目錄錄 (5)下载Ext (6)开始！ (6)Element：Ext 的核心 (6)获取多个DOM 的节点 (7)响应事件 (7)使用Widgets (9)使用Ajax (11)EXT 源码概述 (13)揭示源代码 (13)发布Ext 源码时的一些细节 (14)我应该从哪里开始？ (15)适配器Adapters (15)核心Core (15)Javascript 中的作用域（scope） (15)事前准备 (15)定义 (15)正式开始 (16)window 对象 (16)理解作用域 (17)变量的可见度 (17)EXT 程序规划入门 (18)事前准备 (18)需要些什么？ (18)applayout.html (18)applayout.js (19)公开Public、私有Private、特权的Privileged？ (21)重写公共变量 (23)重写（Overriding）公共函数 (23)DomQuery 基础 (24)DomQuery 基础 (24)扩展EXT 组件 (31)文件的创建 (31)Let's go (35)完成 (37)EXT 的布局（Layout） (39)简单的例子 (40)加入内容 (43)开始使用Grid (53)EXT 中文手册EXT 中文手册pjq 收集整理42008步骤一定义数据(Data Definition) (53)步骤二列模型（Column Model） (54)Grid 组件的简易分页 (55)d G rid 数据 (55)的怎么做一个分页的d Gr id (56)栏分页栏r T ool ba r (56)EXT Menu 组件 (57)创建简易菜单 (57)种各种m Item 的类型 (59)m I tem 属性 (59)在在I UI 中摆放菜单 (59)u M enu 的分配方式： (60)练一练 (62)到动态添加菜单按钮到r Too lb ar (62)更方便的是 (63)下一步是 (63)模板（Templates）起步 (63)第一步您的HTML 模板 (63)第二步，将数据加入到模板中 (64)下一步 (64)学习利用模板（Templates）的格式化功能 (64)正式开始 (64)下一步 (66)事件处理 (66)非常基础的例子 (66)处理函数的作用域 (66)传递参数 (67)类设计 (67)对象创建 (67)使用构造器函数 (68)方法共享 (68)表单组件入门 (69)表单体 (69)创建表单字段 (69)完成表单 (70)下一步 (71)为一个表单填充或提交数据 (71)让我们开始吧 (71)读取我们的数据 (72)EXT 中的继承 (73)补充资料 (74)Ext 2 概述 (74)组件模型Component Model (76)容器模型Container Model (80)EXT 中文手册EXT 中文手册pjq 收集整理52008布局Layouts (81)Grid (84)XTemplate (84)DataView (85)其它新组件 (85)EXT2 简介 (86)下载Ext (86)开始！ (87)Element：Ext 的核心 (87)获取多个DOM 的节点 (88)响应事件 (88)使用Widgets (90)編輯使用Ajax (93)TabPanel 基础 (96)Step 1: 创建HTML 骨架 (96)Step 2: Ext 结构的构建 (97)Step 3: 创建Tab 控制逻辑 (99)EXT 简介无论你是Ext 库的新手，抑或是想了解Ext 的人，本篇文章的内容都适合你。

ExtJS快速入门指南

ExtJS快速入门指南一、ExtJS框架简介 (1)二、如何使用Ext (2)三、Ext组件 (3)1、组件简介 (3)2、组件XType (4)3、组件应用 (4)4、组件配置选项 (5)5、组件属性 (6)6、组件方法 (6)四、事件及事件响应 (7)五、Component及Container简介 (10)1、ponent (10)2、tainer (10)六、面板Ext.Panel (11)面板Panel简介 (11)面板内容 (12)面板与DOM节点DIV (13)七、ViewPort (14)八、窗口Window (17)九、对话框 (18)十、TabPanel (22)十一、布局 (26)十二、表格Grid (29)十三、TreePanel (30)十四、表单Form (32)十五、理解Html DOM、Ext Element及Component (34)十六、Ext类中的get方法简介 (35)十七、如何学习及掌握Ext (37)一、ExtJS框架简介ExtJS也就是Ext框架，官方网址为，ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。

ExtJS可以用来开发RIA(Rich Internet Application，富互联网应用系统)的开源AJAX应用框架，使用的开源协议是GPL。

ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于UI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

二、如何使用Ext首先从ext官方网站下载ext的sdk，把sdk拷到web应用程序目录，然后即可在web 页面中直接通过<script>标签引入ext的库文件，就可以使用javascript调用ext的各种控件。

纯JS前端分页方法（JS分页）

纯JS前端分页⽅法（JS分页）1、JS分页函数：开发过程中，分页功能⼀般是后台提供接⼝，前端只要传page（当前页码）和pageSize（每页最⼤显⽰条数）及对应的其他查询条件，就可以返回所需分页显⽰的数据。

但是有时也需要前端本地进⾏⼀些简单的分页处理以减轻浏览器渲染时的内存损耗。

如后台传回的数据条数⾮常多，达到⼏千条甚⾄上万条，但是后台⼜不⽅便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进⾏分页并渲染显⽰。

2、只需要⼀个纯原⽣的js函数就可以实现前端的分页功能，直接上js代码：1/**2 * @name getTableData3 * @desc 纯JS前端分页⽅法4 * @param {Number} page 当前页码，默认15 * @param {Number} pageSize 每页最多显⽰条数，默认106 * @param {Array} totalData 总的数据集，默认为空数组7 * @return {Object} {8 data, //当前页展⽰数据，数组9 page, //当前页码10 pageSize, //每页最多显⽰条数11 length, //总的数据条数12 }13**/14 const getTableData = (page = 1, pageSize = 10, totalData = []) => {15 const { length } = totalData;16 const tableData = {17 data: [],18 page,19 pageSize,20 length,21 };22if (pageSize >= length) { //pageSize⼤于等于总数据长度，说明只有1页数据或没有数据23 tableData.data = totalData;24 tableData.page = 1;//直接取第⼀页25 } else { //pageSize⼩于总数据长度，数据多余1页26 const num = pageSize * (page - 1);//计算当前页（不含）之前的所有数据总条数27if (num < length) { //如果当前页之前所有数据总条数⼩于（不能等于）总的数据集长度，则说明当前页码没有超出最⼤页码28 const startIndex = num;//当前页第⼀条数据在总数据集中的索引29 const endIndex = num + pageSize - 1;//当前页最后⼀条数据索引30 tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex);//当前页数据条数⼩于每页最⼤条数时，也按最⼤条数范围筛取数据31 } else { //当前页码超出最⼤页码，则计算实际最后⼀页的page，⾃动返回最后⼀页数据32 const size = parseInt(length / pageSize); //取商33 const rest = length % pageSize; //取余数34if (rest > 0) { //余数⼤于0，说明实际最后⼀页数据不⾜pageSize，应该取size+1为最后⼀条的页码35 tableData.page = size + 1;//当前页码重置，取size+136 tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);37 } else if (rest === 0) { //余数等于0，最后⼀页数据条数正好是pageSize38 tableData.page = size;//当前页码重置，取size39 tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);40 } //注：余数不可能⼩于041 }42 }43return tableData;44 };只需要传⼊对应参数就可以返回带有对应分页属性的对象，⽤于前端界⾯展⽰。

ext.js用法

Ext JS 是一个用于构建丰富交互式Web 应用程序的JavaScript 框架。

它提供了许多用于创建用户界面的工具和组件，例如表格、表单、按钮、滑块等。

以下是使用Ext JS 的一些基本步骤：1.引入Ext JS 库：首先，您需要在HTML 文件中引入Ext JS 库。

您可以从Ext JS官方网站下载库文件，并将其放置在您的Web 服务器上。

然后，在HTML 文件中使用<script>标签引入库文件。

html复制代码<script src="path/to/ext.js"></script>2.创建Ext JS 应用程序：使用Ext JS，您可以创建一个应用程序对象来管理整个应用程序的生命周期。

您可以使用Ext.create()方法创建一个应用程序对象。

javascript复制代码Ext.create('Ext.app.Application', {name: 'MyApp',launch: function() {// 在这里编写应用程序的启动代码}});3.创建组件：在Ext JS 中，您可以创建各种类型的组件，例如表格、表单、按钮等。

您可以使用Ext.create()方法创建一个组件对象，并指定组件类型和配置选项。

javascript复制代码Ext.create('Ext.button.Button', {text: 'Click me',renderTo: Ext.getBody(), // 将按钮渲染到页面中handler: function() {// 在这里编写按钮点击事件的代码}});4.配置组件：您可以设置组件的各种属性，例如大小、位置、样式等。

您可以在创建组件时使用配置选项来设置这些属性。

5.处理事件：在Ext JS 中，您可以处理各种事件，例如点击事件、键盘事件等。

Ext-JS概述(工作原理)

Ext-JS概述（工作原理）什么是ExtJSExtJS（简称Ext）是以HTML作为控件的骨干、CSS作为样式的表现、以JavaScript 作为编程语言，可应用于IE/FireFox/Opera等的各种浏览器上的AJAX UI组件库。

Ext美观大方，实例完整，完全可以靠这些丰富例子，就地取材很快的建立起一个像样的程序来。

示例--使用AJAX技术在网格中显示服务器端记录数组数据。

检查Ext内核是否添加并可用。

静态页面：<html><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312"><title>Grid Filter Example</title><link rel="stylesheet" type="text/css"href="../../resources/css/ext-all.css" /><script type="text/javascript" src="../../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="grid-filter.js"></script></head><body><h1>Grid Filter Example</h1><div id="grid-example" style="margin: 10px;"></div></body></html>说明：Ext的内核文件有如下几个：ext-all.css与显示有关的JavaScript文件grid-filter.js，实现显示与界面的分离。

ExtJs 页面布局三

ExtJs 页面布局三主要是看一下里面的复选框是如何实现的---------------------------------------------------------------------------------------------// 判断是否存在此对象，如果不存在则新建，否则直接返回var _showpanel = Ext.getCmp(this.genId("main")); if (_showpanel) { return _showpanel; } var _this = this; var_buyASendB=1;//买A送B优惠var _buyNAandMB=2;//买NA+MB则优惠var _numberN=3;//第N件优惠var_limitTime=4;//限时优惠/** * 以下参数是从参数页面传递过来的*/ var _promopacktype=null;//促销类型var_querytype=null;//查询日期类型var _begindate=null;//起始日期var _enddate=null;//结束日期var _status=null;//促销方案状态var _promopackname=null;//促销方案名称var_promopackid=null;//促销单号var _corpcode=null;//门店编号var _corpname=null;//门店名称var _articlasscode=null;//分类编号var _articlassname=null;//分类名称var_brandcode=null;//品牌编号var _brandname=null;//品牌名称var _articode=null;//商品编号var _artiname=null;//商品名称//销售综合查询主表var promopackMStore = newExt.data.JsonStore({ url : "data/promopack1.txt", root : "data", fields : [ { name : "promopacktype", type : "string" }, { name :"promopackname", type : "string" }, { name : "begindate", type : "string" }, { name : "enddate", type : "string" }, { name : "begintime", type : "string" },{ name : "endtime", type : "string" }, { name : "promopackqty", type : "string" }, { name : "pmon", type : "string" }, { name : "ptue", type : "string" },{ name : "pwed", type : "string" }, { name : "pthu", type : "string" }, { name : "pfri", type : "string" }, { name : "psat", type : "string" },{ name : "psun", type : "string" },{ name : "pmem", type : "string" }, { name : "status", type : "string" }, { name : "promopackid", type : "string" },{ name : "optrid", type : "string" }, { name : "ortrtime", type : "string" }, { name : "checkid", type : "string" }, { name : "checktime", type : "string" },{ name : "ROWNUMCNT", type : "string" }, { name : "ROW1", type : "string" } ], listeners : { scope : this, beforeload : function(sto, obj){ sto.baseParams.promopacktype=_promopacktype;sto.baseParams.promopackid = _promopackid;sto.baseParams.uerytype = _querytype;//查询日期类型sto.baseParams.begindate = _begindate;//起始日期sto.baseParams.enddate= _enddate;//结束日期sto.baseParams.status= _status;//促销方案状态sto.baseParams.promopackname = _promopackname;//促销方案名称sto.baseParams.corpcode = _corpcode;//门店编号sto.baseParams.corpname = _corpname;//门店名称sto.baseParams.articlasscode = _articlasscode;//分类编号sto.baseParams.articlassname = _articlassname;//分类名称sto.baseParams.brandcode = _brandcode;//品牌编号sto.baseParams.brandname = _brandname;//品牌名称sto.baseParams.articode = _articode;//商品编号sto.baseParams.artiname = _artiname;//商品名称} } });this.mainRocord=null; var mainOthgrpcode=null; //组类型var _grptypeData=[ ['1','购买'], ['2','优惠'], ['3','例外'] ]; var_grptypeStore=new Ext.data.SimpleStore({ data:_grptypeData, fields:['value','text'] }); var _grptypeComboBox=newboBox({ store:_grptypeStore, displayField:'text', valueField:'value', mode:'local',id:this.genId('grptypecombobox'), name:'grptypecombobox', triggerAction:'all', width:120, allowBlank:false, editable:false, emptyText:'请选择...', listeners:{ change:function(){ } } }); //组号var _corpcodeField=newExt.form.NumberField({ id:_this.genId('corpcodefield'), name:'corpcodefield', enableKeyEvents : true, listeners : { keyup: function(src, evt){ var val =src.getValue().toString().replace(/\D/g,'');src.setValue(val); } } });//促销方式var _promotypeData=[ ['1','价格'], ['2','折扣'] ]; var _promotypeStore=newExt.data.SimpleStore({ data:_promotypeData,fields:['value','text'] }); var _promotypeComboBox=newboBox({ store:_promotypeStore, displayField:'text', valueField:'value', mode:'local',id:_this.genId('promotypecombobox'),name:'promotypecombobox', triggerAction:'all', width:120, allowBlank:false, editable:false, emptyText:'请选择...' }); //数量条件var _saleqtyField=newExt.form.NumberField({ id:_this.genId('saleqtyfield'),name:'saleqtyfield', enableKeyEvents : true, listeners : { keyup: function(src, evt){ var val =src.getValue().toString().replace(/\D/g,''); src.setValue(val); } } }) //促销值var _promopriceField=newExt.form.NumberField({ fieldLabel:'门店编号',id:_this.genId('promopricefield'), name:'promopricefield', enableKeyEvents : true, listeners : { keyup: function(obj,evt){ var val = src.getValue().toString().replace(/[^\d\.]/g,''); src.setValue(val); } } }) //添加商品_this.fn_addgoods=function(){ alert('goods'); }; //添加分类_this.fn_addtype=function(){ alert('type'); }; //添加品牌_this.fn_addbrand=function(){ alert('brand'); }//添加商品按钮var _addGoods=new Ext.Button( { xtype : "button", text : "添加商品", id:_this.genId('addGoods'), icon : "image/chaxun.png", handler : _this.fn_addgoods }) //添加分类按钮var _addType=new Ext.Button({ xtype : "button", text : "添加分类", id:_this.genId('addType'), icon :"image/chaxun.png", handler : _this.fn_addtype }) //添加品牌var _addBrand=new Ext.Button({ xtype : "button", text : "添加品牌", id:_this.genId('addBrand'), icon : "image/chaxun.png", handler : _this.fn_addbrand }); var promopackMCheckbox = new Ext.grid.CheckboxSelectionModel({ checkOnly : false, singleSelect : true, listeners:{ scope:this,rowselect:function(opt,rowIndex,record){ _this.mainRocord=pr omopackMgrid.getSelectionModel().getSelected();if(record){ _promopackid=record.get('promopackid');_promopacktype=record.get('promopacktype') }promopack2Store.load({ params : { start : 0, limit : gLimit } }); promopack3Store.load({ params : { start : 0, limit : gLimit } }); /* * 第一组:买A送B优惠*/if(_promopacktype==_buyNAandMB ){ } /* * 第二组:MA+NB优惠,则"添加分类","添加品牌"按钮无效*/if(_promopacktype==_buyNAandMB ){_addType.hide();_addBrand.hide(); } /* * 第三组:第N件优惠,则"添加分类","添加品牌"按钮无效*/if(_promopacktype==_numberN){ _ad dType.hide();_addBrand.hide(); } /* * 第四组:限时优惠*/if(_promopacktype==_buyNAandMB ){} }, rowdeselect:function(){ mainOthgrpcode=null; } } }); var promopackMCM = newExt.grid.ColumnModel([ promopackMCheckbox, { header : "促销类型", dataIndex : "promopacktype", width : 70, hideable : false, sortable : true, resizable : true }, { header : "促销名称", dataIndex : "promopackname", width : 70, hideable : false, sortable : true, resizable : true }, { header : "开始日期", dataIndex : "begindate", width : 70, hideable : false, sortable : true, resizable : true }, { header : "结束日期", dataIndex : "enddate", width : 70, hideable : false, sortable : true, resizable : true }, { header : "开始时间", dataIndex : "begintime", width : 70, hideable : false, sortable : true, resizable : true },{ header : "结束时间", dataIndex : "endtime", width : 70, hideable : false, sortable : true, resizable : true }, { header : "限购次数", dataIndex : "promopackqty", width : 40, hideable : false, sortable : true, resizable : true }, { header : "周一", dataIndex : "pmon", width : 40, hideable : false, sortable : true, resizable : true, editor:new Ext.grid.GridEditor(newExt.form.Checkbox({ //allowBlank:false })), renderer:function(value){ if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return "<inputtype='checkbox' disabled='disabled'/>"; } } },{ header : "周二", dataIndex : "ptue", width : 40, hideable : false, sortable : true, resizable : true, editor:newExt.grid.GridEditor(newExt.form.Checkbox({ allowBlank:false })), renderer:function(value){ if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return "<inputtype='checkbox'disabled='disabled'/>"; } } },{ header : "周三", dataIndex : "pwed", width : 40, hideable : false, sortable : true, resizable : true, editor:new Ext.grid.GridEditor(newExt.form.Checkbox({ allowBlank:false })), renderer:function(value){ if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return"<input type='checkbox'disabled='disabled'/>"; } } }, { header : "周四", dataIndex : "pthu", width : 40, hideable : false, sortable : true, resizable : true, editor:new Ext.grid.GridEditor(newExt.form.Checkbox({ allowBlank:false })), renderer:function(value){ if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return "<inputtype='checkbox' disabled='disabled'/>"; } } },{ header : "周五", dataIndex : "pfri", width : 40, hideable : false, sortable : true, resizable : true, editor:newExt.grid.GridEditor(newExt.form.Checkbox({ allowBlank:false })), renderer:function(value){ if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return "<inputtype='checkbox' disabled='disabled'/>"; } } },{ header : "周六", dataIndex : "psat", width : 40, hideable : false,sortable : true, resizable : true, editor:newExt.grid.GridEditor(newExt.form.Checkbox({ allowBlank:false })), renderer:function(value) { if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return "<inputtype='checkbox'disabled='disabled'/>"; } } },{ header : "周日", dataIndex : "psun", width : 40, hideable : false, sortable : true, resizable : true, editor:new Ext.grid.GridEditor(newExt.form.Checkbox({ allowBlank:false })), renderer:function(value) { if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return "<inputtype='checkbox' disabled='disabled'/>"; } } }, { header : "会员", dataIndex : "pmem", width : 40, hideable : false, sortable : true, resizable : true, editor:newExt.grid.GridEditor(newExt.form.Checkbox({ allowBlank:false })), renderer:function(value) { if(value==1){ return "<input checked type='checkbox' disabled='disabled'/>"; } else{ return"<input type='checkbox'disabled='disabled'/>"; } } }, { header : "状态", dataIndex : "status", width : 40, hideable : false, sortable : true, resizable : true }, { header : "促销单号", dataIndex : "promopackid", width : 70, hideable : false, sortable : true, resizable : true },{ header : "录入人", dataIndex : "optrid", width : 70, hideable : false, sortable : true, resizable : true }, { header : "录入时间", dataIndex : "ortrtime", width : 70, hideable : false, sortable : true, resizable : true }, { header : "审核人", dataIndex : "checkid", width : 70, hideable : false, sortable : true, resizable : true }, { header : "审核时间", dataIndex : "checktime", width : 70, hideable : false, sortable : true, resizable : true },{ header : "ROWNUMCNT", dataIndex : "ROWNUMCNT", width : 100, hideable : false, sortable : true, resizable : true, hidden:true },{ header : "ROW1", dataIndex : "ROW1", width : 100, hideable : false, sortable : true, resizable : true, hidden:true }]);var _form; this.setpromopackMWin = function() { return new Ext.Window({ title : '组合促销方案', id :_this.genId('winm'), name : _this.genId('winm'), width : 700, height :200, border : false, // resizable: true, layout : 'fit', modal : true, closable : true, // labelAlign: "right", // buttonAlign: 'center',resizable : false, items : [ _form.init() ], listeners : { beforeshow : function() { _wthis = this; } }, reload : function(){ promopackMStore.load({ params : { start : 0, limit :gLimit } }); } }) } /*** * 回调函数,用于查询返回查询参数*/this.callbackFn=function(_promopacktypeC,_querytypeC,_begindateC,_enddateC,_statusC,_promopacknameC,_promopackidC,_corpcodeC,_corpnameC,_articlasscodeC,_articlassnameC,_brandcodeC,_brandnameC,_articodeC,_artinameC){ _promopacktype=_promopacktypeC ;//促销类型_querytype=_querytypeC;//查询日期类型_begindate=_begindateC;//起始日期_enddate=_enddateC;//结束日期_status=_statusC;//促销方案状态_promopackname=_promopacknameC;//促销方案名称_promopackid=_promopackidC;//促销单号_corpcode=_corpcodeC;//门店编号_corpname=_corpnameC;//门店名称_articlasscode=_articlasscodeC;//分类编号_articlassname=_articlassnameC;//分类名称_brandcode=_brandcodeC;//品牌编号_brandname=_brandnameC;//品牌名称_articode=_articodeC;//商品编号_artiname=_artinameC;//商品名称promopackMStore.load({ params : { start : 0, limit :gLimit } }); } /* * 传递参数到propopackQuery页面* @param {Object} conf */ var _openWin=function(){ _form = new ff.bx.promopackQuery({_callFn:_this.callbackFn,_promopacktypeC:_promopacktype, _querytypeC:_querytype, _begindateC:_begindate, _enddateC:_enddate, _statusC:_status, _promopacknameC:_promopackname,_promopackidC:_promopackid, _corpcodeC:_corpcode,_corpnameC:_corpname, _articlasscodeC:_articlasscode,_articlassnameC:_articlassname, _brandcodeC:_brandcode,_brandnameC:_brandname, _articodeC:_articode,_artinameC:_artiname }); var _w = new_this.setpromopackMWin(''); _w.show(); _w.setTitle(_w.title + "——[查询条件]"); }// 组合促销查询事件this.btn_query = function(){ _openWin(); /*promopackMStore.load({ params : { start : 0, limit : gLimit } });*/ } //组合促销添加this.btn_add=function(){ _form = new ff.bx.promopackAdd(); var _w = new _this.setpromopackMWin(); _w.show();_w.setTitle(_w.title + "——[新增]"); } // 删除this.btn_delete=function(){ var _recordM = promopackMgrid.getSelectionModel().getSelected();if(_recordM){ var _statusM = _recordM.get('status'); var_promopackidM = _recordM.get('promopackid');if(_statusM!='1'){ Ext.Msg.alert('提示', '不是申请状态不能删除'); return false; } //删除Ext.Msg.confirm("提示", "是否删除选中的组合促销方案的记录信息?", function(btn){ if(btn == 'yes'){ Ext.Ajax.request({ url : 'promo_delpack.do', method:'post', success : function(res, opt) { var ret =Ext.decode(res.responseText); if (ret.data[0].status == "0") { promopackMStore.reload(); Ext.Msg.alert("提示", "您选中的组合促销方案的记录信息已删除成功"); } else{ Ext.Msg.alert("提示",ret.data[0].note); } }, failure : function() { Ext.Msg.alert("提示","连接已断开，请检查您的网络连接是否正常！"); }, params :{ promopackid:_promopackidM } }) } }); }else{ Ext.Msg.aler t('提示', '请选择一条组合促销方案的记录!'); return false; } } //修改this.btn_update=function(){ var _recordM = promopackMgrid.getSelectionModel().getSelected();if(_recordM){ var _statusM = _recordM.get('status'); var_promopackidM = _recordM.get('promopackid');if(_statusM!='1'){ Ext.Msg.alert('提示', '不是申请状态不能修改'); return false; } _form = new ff.bx.promopackAdd(); var _w = new _this.setpromopackMWin('add'); _w.show();_w.setTitle(_w.title + "——[修改]");_form.setRecord(_recordM); }else{ Ext.Msg.alert('提示', '请选择一条组合促销方案的记录!'); return false; } }// 审核this.btnd_check=function(){ var _recordM = promopackMgrid.getSelectionModel().getSelected();if(_recordM){ var _statusM = _recordM.get('status'); var_promopackidM = _recordM.get('promopackid');if(_statusM!='1'){ Ext.Msg.alert('提示', '不是申请状态不能进行审核'); return false; } Ext.Msg.confirm("提示", "您确认审核选中的组合促销方案的记录信息?", function(btn){ if(btn == 'yes'){ Ext.Ajax.request({ url : 'promo_checkpack.do', method:'post', success : function(res, opt) { var ret =Ext.decode(res.responseText); if (ret.data[0].status == "0") { promopackMStore.reload(); Ext.Msg.alert("提示", "您选中的组合促销方案的记录信息已审核成功"); } else{ Ext.Msg.alert("提示",ret.data[0].note); } }, failure : function() { Ext.Msg.alert("提示","连接已断开，请检查您的网络连接是否正常！"); }, params : { promopackid:_promopackidM, status:_statusM } }) } }); }else{ Ext.Msg.alert('提示', '请选择一条组合促销方案的记录!'); return false; } } // 撤销this.btnd_back=function(){ var _recordM = promopackMgrid.getSelectionModel().getSelected();if(_recordM){ var _statusM = _recordM.get('status'); var_promopackidM = _recordM.get('promopackid');if(_statusM!='1'){ Ext.Msg.alert('提示', '不是申请状态不能进行撤销'); return false; } Ext.Msg.confirm("提示", "您确认撤销选中的组合促销方案的记录信息?", function(btn){ if(btn == 'yes'){ Ext.Ajax.request({ url : 'promo_undopack.do', method:'post', success : function(res, opt) { var ret =Ext.decode(res.responseText); if (ret.data[0].status == "0"){ promopackMStore.reload(); Ext.Msg.alert("提示", "您选中的组合促销方案的记录信息已撤销成功"); } else{ Ext.Msg.alert("提示",ret.data[0].note); } }, failure : function() { Ext.Msg.alert("提示","连接已断开，请检查您的网络连接是否正常！"); }, params : { promopackid:_promopackidM, status:_statusM } }) } }); }else{ Ext.Msg.alert('提示', '请选择一条组合促销方案的记录!'); return false; } } // 组合促销主表grid var promopackMgrid = newExt.grid.EditorGridPanel({ title : "组合促销方案总表显示区", id : this.genId("promopackMgrid"), store : promopackMStore, cm : promopackMCM, autoScroll : true, loadMask : true, frame : true, // autoHeight : true, // autoWidth : true, sm : promopackMCheckbox, listeners : { "beforedestroy" :function(obj) { obj.getStore().removeAll(); obj = null; } }, tbar : [ { xtype : 'buttongroup', id:this.genId('sumbutton'), defaults :{ scale : 'small' }, layoutConfig : { columns :20 }, items : [{ xtype:'button', text:'查询', icon : "image/chaxun.png", handler:this.btn_query },{ xtype:'button', text:'添加', icon : "image/change.png", handler:_this.btn_add },{ xtype:'button', text:'删除', icon : "image/add.png",handler:this.btn_delete },{ xtype:'button', text:'修改', icon : "image/change.png", handler:_this.btn_update },{ xtype:'button', text:'审核', icon : "image/change.png",handler:_this.btn_check },{ xtype:'button', text:'撤销', icon : "image/change.png", handler:_this.btn_back }] }], bbar :[ { xtype : "paging", pageSize : gLimit, store : promopackMStore, displayInfo : true, displayMsg : '数据第{0}条- 第{1}条，共{2}条', emptyMsg : "没有数据" } ] });-------------------------------------------------------------------------------------。

学习ExtJS—窗口和对话框

学习ExtJS—窗口和对话框窗口计算机的用户对窗口的概念应该都很熟悉。

我们可以使用Ext.Windows类来复制这个概念，Ext.Windows是一个支持很多高级的场景的强有力的组件。

.从一个例子开始我们可以使用最少的代码来打开一个窗口：1.var w = new Ext.Window({height:100, width: 200});2.w.show();复制代码运行这段代码，我们会得到一个空白的弹出窗口—当然是一个毫无用处的窗口。

但是这段代码演示了Ext.Windows一些缺省的功能。

直接拿来使用，不需要任何配置，我们的窗口就是可以拖动的，可以改变大小的，并且在右上角有关闭按钮。

因为我们的窗口没有显示任何的内容，所以这个例子看起来不是那么让人印象深刻。

最简单的弹出一个有内容的窗口的方法是使用普通的HTML。

下面是一个演示了这个功能的例子：1.var w = new Ext.Window({2.height: 150, width: 200,3.title: 'A Window',4.html: '<h1>Oh</h1><p>HI THERE EVERYONE</p>'5.});6.w.show();复制代码我们添加了2个新的配置选项。

第一个是title选项，这个选项允许我们设置窗口标题栏中的文本。

第二个是html选项，这个选项接受一个原始的HTML字符串，这个HTML会显示在窗口中。

这种方式的使用是非常直接的—我们能够从最基本的部分开始并注入我们需要在窗口的内容区域显示的HTML。

这种方式允许我们从最基础的部分调整我们的窗口，并且可以使用CSS。

但是，这并不是我们对Ext JS所期望的一致性的体验。

另外一种配置选项才是我们所熟悉的方式。

.Panel的潜力记住，Window是Panel的子类，而Panel有很多有趣的“秘技”。

ext.js用法 -回复

ext.js用法-回复ext.js是一个用于构建用户界面的JavaScript框架，它提供了丰富的组件和工具，可以帮助开发人员快速创建功能强大且交互性强的Web应用程序。

本文将一步一步回答有关ext.js的用法及其相关主题。

1. 什么是ext.js？ext.js是一个开源的JavaScript框架，由Sencha公司开发。

它基于MVC （模型-视图-控制器）架构和面向对象编程的思想，并专注于提供丰富的用户界面组件。

ext.js提供了大量的易于使用的API，可以帮助开发人员快速构建现代化的Web应用程序。

2. 安装ext.js要使用ext.js，首先需要下载它的开发版本。

可以从官方网站（3. 创建组件ext.js提供了各种各样的用户界面组件，例如按钮、表格、表单、菜单等，开发人员可以使用这些组件来构建功能强大的Web应用程序。

要创建一个组件，首先需要定义一个扩展了相应基类的JavaScript类。

例如，要创建一个按钮组件，可以使用Ext.Button类来定义一个新的JavaScript类：javascriptExt.define('MyApp.view.Button', {extend: 'Ext.Button',text: 'Click me',handler: function() {alert('Button clicked!');}});上面的代码创建了一个名为`MyApp.view.Button`的新类，该类扩展了`Ext.Button`基类。

在类的定义中，我们可以指定各种属性，例如按钮的文本和点击事件的处理函数。

4. 渲染组件在创建完组件类后，我们需要将它渲染到页面上。

对于按钮组件，可以使用`Ext.create`方法来创建实例，并将它添加到页面上的某个元素中：javascriptvar button = Ext.create('MyApp.view.Button');button.render('myContainer');上面的代码创建了一个按钮实例，并将它渲染到id为`myContainer`的元素中。

EXT_JS实用教程

EXT开发指南目录一、EXTJS框架下载: (2)二、EXTJS使用 (2)1. 页面引用 (2)2. ExtJS 调用 (2)3. 组件体系下图所示： (3)1) 组件的使用 (4)2) 组件的配置属性 (5)三、各功能组件使用方法及介绍 (10)1. 面板Panel (10)2. 窗口Ext.Window (14)3. 布局 (19)4. 表格 (26)5. 数据存储Store (37)6. 树控件 (42)一、EXTJS框架下载:下载地址：/或者二、EXTJS使用1.页面引用<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script>2.ExtJS 调用在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，程序的代码大致如下：<script>function fn(){alert(“ExtJS库已加”);}Ext.onReady(fn);</script>fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：<script>Ext.onReady(function (){alert(“ExtJS库已加载!”);});</script>进一步，我们可以在页面上显示一个窗口，代码如下：<script>Ext.onReady(function(){var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello</h1>'});//参数是"标题,宽度,高度,html文本"win.show();});</script>3.组件体系下图所示：组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

ext 界面制作二

带验证码常用的属性：new Ext.form.TextField({id:"randCode",name:"randCode",width:"70",fieldLabel:"验证码",// allowBlank:false,blankText:"必须输入验证码"})],buttons:[{text:"登录",formBind:true,handler:function(){loginForm.getForm().submit({url:"bookext.do?method=login",waitMsg:"请稍等,正在登录!",success:function(form ,action){//这里是登陆之后跳转常用的进入一个frame window.location.href="/MyWebRebuild/bookext.do?method=getUserName"; },failure:function(form , action){Ext.Msg.alert("提示",action.result.msg); }});}},{text:"重置",handler:function(){loginForm.form.reset();}}]}); //到这里一个fromPanel结束了，之后是加入一个Window里面的var rc =Ext.getDom("randcode");//得到上面ID为randcode的组件var rcp =Ext.get(rc.parentNode);//这时是得到那个组件的下一个节点也就是它的旁边 rcp.createChild({tag:'img',src:'pagesExt/image.jsp',align:'absbottom'});。

ext简介

1 Ext 简介1.1 ext 简介ExtJS 是一个用 javascript 写的，主要用于创建前端用户界面，与后台技术无关的前端 ajax 框架。

因此，可以把 ExtJS 用在 .Net、Java、Php 等各种开发语言开发的应用中。

该框架完全基于纯 Html/CSS+JS 技术，提供丰富的跨浏览器 UI 组件，灵活采用 JSON/XML 数据源开发，实现前台和后台数据的交。

ExtJs 官方网站。

！它可以实现的功能有：菜单、目录树、 form 表单、表格、图形统计、窗口页面等。

而且还可以利用一些扩展类对功能进行扩展。

Ext 是基于 Web 的客户端框架，完全是基于标准 W3C 技术构建设的，其使用到的都是 HTML、 CSS、 DIV 等相关技术。

Ext 最杰出之处，是开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现各种丰富多彩的 UI 的开发。

1.2 ext 学习与应用经验小结Ext 无论组件有多少配置属性、还是事件、方法等等，其最终都会转化为 HTML 在浏览器上显示出来，而每一个 HTML 页面都有一个层次分明的 DOM 树模型，浏览器中的所有内容都有相应的 DOM 对象，动态改变页面的内容，正是通过使用脚本语言来操作 DOM 对象实现。

ExtJS布局之border实例

ExtJS布局之border实例border布局是常见的布局样式，下面是一个实际项目的示例，比较简单，仅供初学者参考。

前两天遇到一个border布局的界面问题，如下：west是一个tree a，center是一个tree b和一个Panel，如下图界面要求：点击左边树节点【培训项目】，打开右边的界面：包括一个树和一个panel。

功能要求：点击右边树的节点，班型列表会根据树节点的ID进行查询，并显示相应的查询结果。

问题：整个界面的右半部分怎样布局？解决：左边的tree就不用解释了，是哪里都能找到的样式。

这里主要解释下右半部分的布局：通常情况下，点击树节点，在布局的某个部分（常见的是center位置）打开一个界面的常用方式是：Js代码1.contentEl : 'center1',2.html : '<iframe scrolling="auto" frameborder="0" width="100%"height="100%" src="classTypeNew.jsp"></iframe>'但这种方式不能在目前场景下使用，因为panel要能获得从tree b传递过来的参数，所以上面这种方式是不行的：classTypeNew.jsp无法获得tree b的节点ID。

建议采用如下方式：1.整体采用border布局。

tree a位于west，tree b和Panel位于center。

2.tree b和Panel采用border布局。

tree b位于west，Panel位于center。

示例代码：Js代码1./**2. * 班型管理部分3. */4. var _JwSales = new Ext.Panel({5. region : 'center',6. collapsible:true,7. items:[_gridStudyClassType,_panelStudyClassTypeInf,_panelStudyClassTypeNodes],8.9. listeners:{10. "show":function(){11.12. _panelStudyClassTypeInf.getForm().reset();13.14. _sessionStore.load();15.16. var _record = _sessionStore.getAt(0);17.18. Ext.getCmp("iStudyClassTypeOprUserName").setValue(_record.get("userName"));19. Ext.getCmp("iStudyClassTypeOprUserId").setValue(_record.get("userId"));20. }21. },22.23. buttons:[24. {25. text:"保存",26.27. listeners:{28. "click":function(){29.30. var stId = Ext.getCmp("iStudyClassTypeStId").getValue();31.32. if(_panelStudyClassTypeInf.getForm().isValid())33. {34. var arrayInfKey = getArrayStudyClassTypeKey();35.36. var arrayInfValue = getArrayStudyClassTypeValue();37.38. var arrayNodesKey = getStudyTypeNodesKey();39.40. var arrayNodesValue = getStudyTypeNodesValue();41.42. if(stId == "")43. {44. //添加45.46. MSClassType.isDo4Add(Ext.getCmp("iItemCombo").getValue(),47. "stName",48. Ext.getCmp("iStudyClassTypeStName").getValue(),49. function addRtn(rtn)50. {51. if(rtn == "true")52. {53. MSClassType.createEntity(54. arrayInfKey,arrayInfValue,55. arrayNodesKey,arrayNodesValue,56.57. function createEntityRtn(rtnCreate){58.59. if(rtnCreate == "success")60. {61. Ext.MessageBox.alert("信息提示","添加成功，点击返回！");62.63. _storeStudyClassType.load({params:{start:0,limit:6}});64.65. Ext.MessageBox.alert("信息提示","添加成功，点击返回！");66.67. addHandler();68. }69. else70. {71. Ext.MessageBox.alert("信息提示","添加失败，请与系统管理员联系！");72. }73. }74. );75. }76. else77. Ext.getCmp("iStudyClassTypeStName").markInvalid("已经存在的班型名称");78. }79. );80. }81. else82. {83. if(Ext.getCmp("iStudyClassTypeStatus").getValue() != "1")84. {85. Ext.MessageBox.alert("信息提示","已经提交或删除，无法修改！");86.87. return ;88. }89.90. /*91. * arrayTextbooksKey,arrayTextbooksValue,92. arrayEmsKey,arrayEmsValue,93. arrayGiftsKey,arrayGiftsValue,94. arrayPsKey,arrayPsValue,95. * */96.97. //修改98. MSClassType.isDo4Edit(Ext.getCmp("iItemCombo").getValue(),stId,99. "stName",100.Ext.getCmp("iStudyClassTypeStName").getValue(),101. function editRtn(rtn)102. {103. if(rtn == "true")104. {105. MSClassType.up dateEntity(106. stId,array InfKey,arrayInfValue,107. arrayNodes Key,arrayNodesValue,108.109. function u pdateEntityRtn(rtnUpdate){110.111. if(rtn Update == "success")112. { 113. Ex t.MessageBox.alert("信息提示","更新成功，点击返回！"); 114.115. _s toreStudyClassType.load({params:{start:0,limit:9}});116.117. Ex t.MessageBox.alert("信息提示","更新成功，点击返回！"); 118. } 119. else 120. { 121. Ex t.MessageBox.alert("信息提示","更新失败，请与系统管理员联系！");122. } 123. }124. );125. }126. else127. Ext.getCmp("iS tudyClassTypeStName").markInvalid("已经存在的班型名称"); 128. }129. );130. }131. }132. }133. }134. },135. {136. text:"提交",137. handler:submitHandler138. },139. {140. text:"清空",141. handler:addHandler142. }143. ]144. });145.146.147.var _treeItem = new Ext.tree.TreePanel({148.149. title : '导航栏',150. region : 'west',151. split : true,152. border : true,153. bodyStyle: 'background-color:#FFFFFF',154. collapsible : true,155. autoScroll : true,156. width : 180,157. minSize : 180,158. maxSize : 280,159. enableDD : true,160.161. el:"_treeItemDiv",162. id:"_treeItem",163. loader : new Ext.tree.TreeLoader({dataUrl :'itemDa ta.jsp'}),164.165. listeners:{166. 'dblclick':function(node,e){167. var subjectID = node.attributes.id;//科目ID168. alert("科目ID = "+ subjectID);169.170. _storeStudyClassType.removeAll(); 171. _storeStudyClassType.load({params:{start:0 ,limit:20,subjectID:node.attributes.id}});172. },173.174. "contextmenu":function(node,e){175.176. if(node.attributes.id == "0")177. {178. var nodemenu=new Ext.menu.Menu({ 179.180. items:[181. {182. text:"添加项目",183. iconCls:'icon-table-add', 184. handler:function(){185.186. _winBaseItemOpr.setTitle("项目管理-添加");187. _winBaseItemOpr.show(); 188.189. _panelBaseItemOpr.getForm( ).reset();190.191. Ext.getCmp("iStudyBaseItem SuperiorItemId").setValue(node.attributes.id);192. Ext.getCmp("iStudyBaseItem ShowIndex").setValue(node.childNodes.length+1);193. }194. }195. ]196. });197.198. nodemenu.showAt(e.getPoint()); 199. }200. else201. {202. var nodemenu=new Ext.menu.Menu({ 203.204. items:[205. {206. text:"删除项目",207. iconCls:'icon-minus',208. handler:function(){209.210.211. }212. },{213. text:"修改项目",214. iconCls:'icon-table-edit', 215. handler:function(){216.217. _winBaseItemOpr.setTitle("项目管理-浏览");218. _winBaseItemOpr.show(); 219.220. _panelBaseItemOpr.getForm( ).reset();221.222. Ext.getCmp("iStudyBaseItem ItemId").setValue(node.attributes.id);223. Ext.getCmp("iStudyBaseItem ItemName").setValue(node.attributes.text);224. Ext.getCmp("iStudyBaseItem SuperiorItemId").setValue(node.attributes.superiorItemId); 225. Ext.getCmp("iStudyBaseItem ShowIndex").setValue(node.attributes.showIndex);226. Ext.getCmp("iStudyBaseItem Inf").setValue(node.attributes.inf);227. }228. }]229. });230.231. nodemenu.showAt(e.getPoint()); 232. }233. }234. }235. });236.237. var _rootItem = new Ext.tree.AsyncTreeNode({text:"尚德教育在线",id:"0"});238.239. _treeItem.setRootNode(_rootItem);240.241. var _panelOrg = new Ext.form.FormPanel({242. collapsible:true,243. frame:true,244. width:bodyWidth,245. height:bodyHeight,246. items:[_treeItem],247. autoScroll:true248. });249.250. _panelOrg.render("_panelItemDiv");251.252. _rootItem.reload();253.254.255. /**256. * 生成一个ViewPort，采用Border布局，保留天地栏，左中栏257. */258. var viewport = new Ext.Viewport({259. layout : 'border',260. items : [_treeItem, _JwSales]261. });。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。