EXT JS 纯页面

格式：pdf
大小：129.69 KB
文档页数：28

下载文档原格式

/ 28

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源码笔记------Ext.js

ExtJs源码笔记------Ext.jsExtJs 源码笔记------Ext.js最近准备系统的学习⼀下Ext的源码，SO,话不多说，从第⼀篇开始。

⾸先，先看⼀下Ext.js这个⽂件的代码结构：var Ext = Ext || {}; // 定义全局变量Ext._startTime = new Date().getTime();(function(){// 定义⼀些局部变量var ......// 核⼼Ext.apply = function(){......};// 初始化 Ext 的⼀些属性函数Ext.apply(Ext, {......});}());// 全局闭包Ext.globalEval = ......代码的结构不难，但是仔细看下来，有些细节的地⽅还是很值得回味⼀番。

下⾯具体分析⼀下我对源码的理解，⽔平有限，不⾜之处还望各位看官指正。

1. 定义局部变量var global = this,objectPrototype = Object.prototype,toString = objectPrototype.toString,enumerables = true,enumerablesTest = {toString: 1},emptyFn = function () {},......for (i in enumerablesTest) {enumerables = null;}// 看到这⾥的时候，有点疑惑，enumerables 不是肯定会被置为 null 吗// 下⾯为什么还需要判断enunerables? 有蹊跷.....// 返回去再看⼀下 enumerablesTest，⾥⾯只有⼀个属性 toString, 为啥偏偏是这样的⼀个属性？？嗯！想起来了，在IE6下，对象中的toString属性，不能通过hasOwnProperty或for...in迭代得到// So，这⾥其实就是为了兼容IE6⽤的。

ext.js query用法

ext.js query用法Ext.js 是一个流行的 JavaScript 框架，用于构建富客户端应用程序。

它提供了丰富的 API 来简化 DOM 操作、事件处理、数据绑定等任务。

在 Ext.js 中，query 是一个非常有用的方法，用于选择和操作 DOM 元素。

使用 query 方法，可以轻松地选择一个或多个 DOM 元素，并对它们进行操作。

下面是一些 query 方法的常见用法：1. 选择单个元素：javascript.var element = Ext.query('#myElement');这将选择 id 为“myElement”的元素，并将其存储在变量element 中。

2. 选择多个元素：javascript.var elements = Ext.query('.myClass');这将选择所有 class 为“myClass”的元素，并将它们存储在一个数组中。

3. 选择子元素：javascript.var childElements =Ext.query('#parentElement .childElement');这将选择 id 为“parentElement”的元素内部所有 class 为“childElement”的子元素，并将它们存储在一个数组中。

4. 使用 CSS 选择器：javascript.var selectedElements = Ext.query('div.myClass >p:first-child');这将使用 CSS 选择器来选择所有 class 为“myClass”的 div 元素中第一个 p 元素，并将它们存储在一个数组中。

一旦选择了需要操作的元素，就可以使用 Ext.js 提供的其他方法来对它们进行操作，例如修改样式、绑定事件、添加/移除元素等。

总之，Ext.js 的 query 方法为开发人员提供了一种简单而强大的方式来选择和操作 DOM 元素，使得构建交互丰富的客户端应用变得更加容易和高效。

一步一步使用ExtJSMVC与Asp.NetMVC3开发简单的CMS后台管理系统之登录窗口

⼀步⼀步使⽤ExtJSMVC与MVC3开发简单的CMS后台管理系统之登录窗⼝完成配置后，要做的是完成登录页⾯。

因为要实现登录之后写⼊认证信息到Cookie，因⽽必须做⼀次跳转。

当然，不做跳转，或不写⼊认证信息也⾏，但问题⽐较复杂，在这⾥还是做简单处理⽐较合适。

还有就是写⼊认证信息的⽬的是为了在控制器通过特性控制⽅法的权限。

既然要跳转⼀次，就有两种思路了，⼀种是为了快速显⽰登录页，可不加载Ext JS，⽽是使⽤传统的页⾯，显⽰⼀个登录页，这样页⾯加载快，⽤户感受也好很多。

第⼆种⽅式就是⽤Ext JS窗⼝做⼀个登录窗⼝，不过要加载Ext JS库，显⽰时间会久点，体验不是太好。

不过加载过Ext JS，后⾯显⽰主框架页的时候就可以利⽤缓存数据。

采⽤那种⽅式，根据⾃⼰喜好或项⽬要求定吧。

本⽂是演⽰Ext JS的，因⽽会采⽤第⼆种⽅式，写⼀个登录窗⼝。

登录窗⼝作为常⽤组件，在其它项⽬也会⽤到，因⽽很适合写成⼀个扩展。

这⾥还要考虑⼀个问题，是写成单例模式的扩展，还是单纯是扩展？单例模式的好处是在页⾯中直接⽤show⽅法显⽰就⾏了，⽽纯扩展的好处的是可以通过配置项⾃定义标题、图标这类的东西。

笔者更喜欢单例模式，原因是直接在扩展中修改标题之类的这些东西，⽐使⽤配置项来定义来得⽅便，毕竟是Javascript写的扩展，修改起来⽐使⽤C#这些语⾔的扩展容易得多了。

⽬标明确后，就可以动⼿了，在解决⽅案资源管理器中选择Scripts\ExtJS\ux⽬录，单击右键选择添加，新建项，在弹出窗⼝中如图6那样选择Jscript⽂件，并将名称修改为login.js（以后的项⽬的可直接将该⽂件复制到该⽬录），单击添加按钮创建⽂件。

这⾥要注意，⽂件名不能⽤类的全名做⽂件名，因为动态加载会根据类名⾃动找到⽬录并加载⽂件，类名中最后⼀个⼩数点后的名称就是⽂件名，例如，登录窗⼝的类全称为Ext.ux.Login，⽽login就是⽂件名。

如果想要在脚本中使⽤ExtJS的提⽰信息，可将书附带的资源包中的Ext.js⽂件复制到ExtJS⽬录中，复制后，在解决⽅案资源管理器将Ext.js拖到到login.js⽂件中，就会⽣成以下代码：/// <reference path="../Ext.js" />这样，就可以在脚本中使⽤Ext JS的提⽰信息，在⽂件中输⼊“Ext.cr”，将看到如图7所⽰的效果。

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) {}})} })。

纯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 中，您可以处理各种事件，例如点击事件、键盘事件等。

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 : "没有数据" } ] });-------------------------------------------------------------------------------------。

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 JS的使用

呼叫中心/Ext JS的使用这，本来是很简单的，但囿于开发人员对Ext JS的理解不到位，搞得相当的复杂了。

主要复杂的地方在以下几点：为了实现编辑表单的可重用，把表单做成了页面，然后在Window 中套IFRAME打开页面。

表单的提交不是用Ajax提交，而是使用习惯的页面跳转方式提交，于是，一切都复杂起来了。

要这样实现，也不是不可以，在最后的提交页面，调用parent 对象操作父页面的对象关闭窗口并刷新Grid。

不过，这样实在太复杂了。

这里存在的问题是对Ext JS的开发理解不到位，还是根据老的开发方式去来写Ext JS的应用程序，因而本来简单的东西一下子就复杂化了，这也是很多初学者经常犯的错误。

要很好的使用Ext JS进行开发，要牢记以下几点：Ext JS的数据交互，基本上是以Ajax为工具，以JSON或XML格式数据进行交互，这个过程，不需要任何的页面跳转来实行，数据的处理都以一种很标准化的数据格式进行处理，如错误处理、成功保存等等信息，都可通过JSON或XML格式的数据来告诉客户端，让客户端去进行处理。

呼叫中心/使用Ext JS（尤其是4）编写自己的扩展，实现组件的重用，非常的方便，不需要把重用部分做成一个页面那么麻烦。

使用Ext JS 4可以很容易实现单页面的应用程序，也就是只需要一个页面就行了，客户端与服务器端的数据交互都是遵循第一点来处理的。

当然，担心性能问题的，也会以IFRAME形式来实现多页面的应用程序，但是，必须明白的是，这也是以单页面为基础的，意思就是，一个IFRAME页面的流程，基本就是一个单页面的应用程序的流程，不需要类似习惯的Web开发方式那样进行多个页面的控制。

理解这点很重要，不然，还真不如不用Ext JS，直接使用习惯的Web 开发方式来开发。

Ext JS在客户端也是数据与UI分离的，千万别在UI中找数据。

使用Ext JS，是基于组件形式来组织UI的，而不是以HTML代码来组织UI的，尽管最终生成的都是HTML代码。

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'});。

Ext2.0教程一：Ext介绍以及 ext页面布局.doc

学习ext有一段时间了，也开发了几个项目，抽点时间做个总结，刚好公司让我做个Ext 培训，于是随便写个Ext教程。

Ext介绍Ext是一个很不错的Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。

ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。

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

至今Ext最新版本是ext2.2，下面的教程都是以Ext2.2作为基础的。

Ext 主要有下列类：Extair:适配器data：数据处理dd：页面元素的拖曳form：表单操作grid：装载数据的表格layout:布局menu：各式菜单state:用户状态tree：各式树util：常用函数学习Ext必须注意，使用ext必须导入ext包，将下载好的ext保存在本地硬盘，像导入普通js文件、css文件一样导入需要的文件；要使用ext，下面三个文件是必须导入的<link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-al l.css" /><script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></scr ipt><script type="text/javascript" src="ext22/ext-all.js"></script>第一个导入Ext样式，其实ext就是js+样式，所以必须导入。

第二和第三个都是js文件，必须注意导入顺序,ext-all.js 里面要使用到ext-base.j s设置的基本参数，因此ext-base.js必须先导入！ext-base.js 有500多k的大小，页面加载的速度可能比较慢，再由于交互性强，特别适合后台管理。

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 对象实现。

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