- 浏览: 71239 次
- 性别:
- 来自: 西安
文章分类
最新评论
总结自己的代码 可能以后会用到 记录一下 方便以后查阅
1:所以显示window 的所需的代码
- MyExt.Utils.myWindow = Ext.extend(Ext.Window, {
- shadow:false,
- closeAction:'hide',
- layout:'fit',
- closable:true,
- resizable:false,
- modal:true,
- constrain:true,
- listeners:{
- hide:function(w){
- if(w.items){
- w.items.each(function(f){
- if(f.getXType()=="form"){
- f.form.reset();
- }
- });
- }
- }
- },
- initComponent: function(config){
- Ext.apply(this,config);
- MyExt.Utils.myWindow.superclass.initComponent.call(this);
- }
- });
MyExt.Utils.myWindow = Ext.extend(Ext.Window, { shadow:false, closeAction:'hide', layout:'fit', closable:true, resizable:false, modal:true, constrain:true, listeners:{ hide:function(w){ if(w.items){ w.items.each(function(f){ if(f.getXType()=="form"){ f.form.reset(); } }); } } }, initComponent: function(config){ Ext.apply(this,config); MyExt.Utils.myWindow.superclass.initComponent.call(this); } });
使用例子:
var win = new MyExt.Utils.myWindow({ height:600 ,width:650 ,items:[form] })
2:jsonStore
- MyExt.Utils.myJsonStore = Ext.extend(Ext.data.JsonStore, {
- constructor: function(config){
- var cfg = {
- totalProperty: "totalCount",//总数
- root: "items",//grid的数据
- autoLoad:false, //是否自动加载
- autoDestroy:true, //自动销毁
- idProperty: 'id' //一个数据对象的参数名,它包含了一条记录的标识符。 默认为 id
- };
- //把cfg对象的所有属性覆盖到congfig对象里面
- //如果congfig对象已经存在cfg的属性 则不覆盖
- Ext.applyIf(config,cfg);
- MyExt.Utils.myJsonStore.superclass.constructor.call(this,config);
- }
- });
MyExt.Utils.myJsonStore = Ext.extend(Ext.data.JsonStore, { constructor: function(config){ var cfg = { totalProperty: "totalCount",//总数 root: "items",//grid的数据 autoLoad:false, //是否自动加载 autoDestroy:true, //自动销毁 idProperty: 'id' //一个数据对象的参数名,它包含了一条记录的标识符。 默认为 id }; //把cfg对象的所有属性覆盖到congfig对象里面 //如果congfig对象已经存在cfg的属性 则不覆盖 Ext.applyIf(config,cfg); MyExt.Utils.myJsonStore.superclass.constructor.call(this,config); } });
使用例子:
- store = new MyExt.Utils.myJsonStore({
- url:"....action",
- fields:[
- {"name":"yyshd","type":"string","mapping":"yyshd"},
- {"name":"hm","type":"string","mapping":"hm"},
- {"name":"sf","type":"string","mapping":"sf"},
- {"name":"ds","type":"string","mapping":"ds"},
- {"name":"yysid","type":"int","mapping":"yysid"},
- {"name":"qy","type":"int","mapping":"qy"}
- ]
- });
store = new MyExt.Utils.myJsonStore({ url:"....action", fields:[ {"name":"yyshd","type":"string","mapping":"yyshd"}, {"name":"hm","type":"string","mapping":"hm"}, {"name":"sf","type":"string","mapping":"sf"}, {"name":"ds","type":"string","mapping":"ds"}, {"name":"yysid","type":"int","mapping":"yysid"}, {"name":"qy","type":"int","mapping":"qy"} ] });
3:行提示
- function showGjToolTip(_grid){
- var _store = _grid.getStore();
- var view = _grid.getView();
- _grid.tip = new Ext.ToolTip ({
- target:view.mainBody,
- delegate:'.x-grid3-row',
- trackMouse :true,
- width:230,
- autoHide:true,
- title:"告警信息",
- dismissDelay:5000, //默认5秒后提示框消失
- frame:true,
- renderTo:document.body,
- bodyStyle:"color:red",//字体颜色
- //floating:{shadow:false,shim:true,useDisplay:true,constrain:false},
- listeners:{
- beforeshow:function updateTipBody(tip){
- var rowIndex = view.findRowIndex(tip.triggerElement);
- if(_store.getAt(rowIndex).get("sfgj")==0){
- return false;
- tip.destroy();
- }else{
- tip.body.dom.innerHTML=_store.getAt(rowIndex).get("gjxx");
- }
- }
- }
- })
- }
function showGjToolTip(_grid){ var _store = _grid.getStore(); var view = _grid.getView(); _grid.tip = new Ext.ToolTip ({ target:view.mainBody, delegate:'.x-grid3-row', trackMouse :true, width:230, autoHide:true, title:"告警信息", dismissDelay:5000, //默认5秒后提示框消失 frame:true, renderTo:document.body, bodyStyle:"color:red",//字体颜色 //floating:{shadow:false,shim:true,useDisplay:true,constrain:false}, listeners:{ beforeshow:function updateTipBody(tip){ var rowIndex = view.findRowIndex(tip.triggerElement); if(_store.getAt(rowIndex).get("sfgj")==0){ return false; tip.destroy(); }else{ tip.body.dom.innerHTML=_store.getAt(rowIndex).get("gjxx"); } } } }) }
4:获得一个不带复选框的树的所有子节点的id
- function getTreeChildIds(node){
- var r = [];
- var f = function(){
- r.push(this.id);
- };
- node.cascade(f);
- return r;
- }
function getTreeChildIds(node){ var r = []; var f = function(){ r.push(this.id); }; node.cascade(f); return r; }
调用例子
- var rootNode = tree.getRootNode(); //获取主节点
- var result = getTreeChildIds(rootNode );
- alert(result );
var rootNode = tree.getRootNode(); //获取主节点 var result = getTreeChildIds(rootNode ); alert(result );
5:对Ext中DateField字段的扩展 (转自: http://gaoliujie.iteye.com/blog/703839 )
Ext中的DateField字段默认显示格式为'm/d/Y',不太符合中国的使用习惯,以'-'号隔开,或直接显示'xxxx年x月x日'的格 式,并且在同一个软件系统中,通常情况会希望日期的显示格式都相同,不要在每个页面中单独设置显示样式。
另外,由于后台传输到前台的格式一般都是java中的Date类型,直接传输到前台会因为Ext中的时区设置问题造成转换错。
基于以上原因,扩展Ext中的DateField字段类型,代码如下所示:
- justgin.bap.DateFieldEx = Ext.extend(Ext.form.DateField,{
- format:"Y-m-d",
- initComponent: function() {
- this.hideTrigger = this.readOnly;
- justgin.bap.DateFieldEx.superclass.initComponent.call(this);
- },
- setValue:function(value){
- var date = this.formatDate2(value);
- justgin.bap.DateFieldEx.superclass.setValue.call(this, date);
- },
- // private ,ext自己有个formatDate方法,因此这里用formatDate2
- formatDate2 : function(date){
- //CST时间和UTC时差转换
- var dateStr=date.toString();
- var position=dateStr.indexOf("UTC");
- if(position!=-1){
- return Ext.util.Format.date(date, this.format);
- }else{
- var vdate=new Date(date); //后台默认为格林尼治时间,该方法会默认把后台时间认为是北京时间,北京时间比格林尼治时间多14小时。
- //找出当地时间偏移值的毫秒数
- var localOffset=vdate.getTimezoneOffset()*60000;
- var utcOffset= vdate.getTime() + localOffset;
- timezone=utcOffset-6*3600000;//
- var lastDate=new Date(timezone);
- return Ext.util.Format.date(lastDate, this.format);
- }
- }
- });
justgin.bap.DateFieldEx = Ext.extend(Ext.form.DateField,{ format:"Y-m-d", initComponent: function() { this.hideTrigger = this.readOnly; justgin.bap.DateFieldEx.superclass.initComponent.call(this); }, setValue:function(value){ var date = this.formatDate2(value); justgin.bap.DateFieldEx.superclass.setValue.call(this, date); }, // private ,ext自己有个formatDate方法,因此这里用formatDate2 formatDate2 : function(date){ //CST时间和UTC时差转换 var dateStr=date.toString(); var position=dateStr.indexOf("UTC"); if(position!=-1){ return Ext.util.Format.date(date, this.format); }else{ var vdate=new Date(date); //后台默认为格林尼治时间,该方法会默认把后台时间认为是北京时间,北京时间比格林尼治时间多14小时。 //找出当地时间偏移值的毫秒数 var localOffset=vdate.getTimezoneOffset()*60000; var utcOffset= vdate.getTime() + localOffset; timezone=utcOffset-6*3600000;// var lastDate=new Date(timezone); return Ext.util.Format.date(lastDate, this.format); } } });
6:对Ext中CheckBox的扩展 (转自:http://gaoliujie.iteye.com/blog/703833 )
使用Ext中的Checkbox时,经常需要随form一起提交,但Checkbox设置的默认的提交值为"on"或"",后台代码中需要对字段的提交进行判断后取值,不符合我们通常的使用习惯,即直接将提交的值转换为对应的boolean类型,为此,特进行扩展和封装,以满足通过的使用方式,代码如下:
- justgin.bap.CheckboxEx = Ext.extend(Ext.form.Checkbox, {
- trueValue: true,
- falseValue: false,
- hiddenField: {value:''},
- onRender : function(ct, position){
- justgin.bap.CheckboxEx.superclass.onRender.call(this, ct, position);
- var hidden = this.el.insertSibling({tag:'input', type:'hidden', name: this.name}, 'before', true);
- hidden.value = this.hiddenField.value;
- this.hiddenField = hidden;
- this.el.dom.removeAttribute('name');
- this.on('check', this.onCheck);
- },
- setValue : function(v){
- var me = this;
- justgin.bap.CheckboxEx.superclass.setValue.call(this, v);
- this.hiddenField.value = this.checked?me.trueValue:me.falseValue;
- },
- getValue : function(v){
- return this.hiddenField.value;
- },
- onDestroy : function(){
- Ext.destroy(this.wrap);
- justgin.bap.CheckboxEx.superclass.onDestroy.call(this);
- },
- onCheck : function(me, checked){
- this.hiddenField.value = checked?me.trueValue:me.falseValue;
- }
- );
justgin.bap.CheckboxEx = Ext.extend(Ext.form.Checkbox, { trueValue: true, falseValue: false, hiddenField: {value:''}, onRender : function(ct, position){ justgin.bap.CheckboxEx.superclass.onRender.call(this, ct, position); var hidden = this.el.insertSibling({tag:'input', type:'hidden', name: this.name}, 'before', true); hidden.value = this.hiddenField.value; this.hiddenField = hidden; this.el.dom.removeAttribute('name'); this.on('check', this.onCheck); }, setValue : function(v){ var me = this; justgin.bap.CheckboxEx.superclass.setValue.call(this, v); this.hiddenField.value = this.checked?me.trueValue:me.falseValue; }, getValue : function(v){ return this.hiddenField.value; }, onDestroy : function(){ Ext.destroy(this.wrap); justgin.bap.CheckboxEx.superclass.onDestroy.call(this); }, onCheck : function(me, checked){ this.hiddenField.value = checked?me.trueValue:me.falseValue; } });
7:grid 上移 下移
- Ext.apply(Ext.grid.GridPanel.prototype, {
- moveUp : function() {
- var d = this.getStore();
- var c = this.getColumnModel();
- var r = this.getSelectionModel().getSelections();
- var idx;
- if (r.length == 0) {
- Ext.Msg.alert('提示', '请选择记录进行操作!');
- return;
- }
- if (r.length == d.getCount())
- return;
- if (d.indexOf(r[0]) == 0)
- return;
- for (var i = 0; i < r.length; i++) {
- idx = d.indexOf(r[i]) - 1;
- d.remove(r[i]);
- d.insert(idx, r[i]);
- }
- this.getSelectionModel().selectRow(idx);
- this.reconfigure(d, c);
- },
- moveDown : function() {
- var d = this.getStore();
- var c = this.getColumnModel();
- var r = this.getSelectionModel().getSelections();
- var idx;
- var idx;
- var len = r.length;
- if (len == 0) {
- Ext.Msg.alert('提示', '请选择记录进行操作!');
- return;
- }
- if (len == d.getCount())
- return;
- if (d.indexOf(r[len - 1]) == d.getCount() - 1)
- return;
- for (var i = 0; i < len; i++) {
- idx = d.indexOf(r[len - i - 1]) + 1;
- d.remove(r[len - i - 1]);
- d.insert(idx, r[len - i - 1]);
- }
- this.getSelectionModel().selectRow(idx);
- this.reconfigure(d, c);
- }
- );
Ext.apply(Ext.grid.GridPanel.prototype, { moveUp : function() { var d = this.getStore(); var c = this.getColumnModel(); var r = this.getSelectionModel().getSelections(); var idx; if (r.length == 0) { Ext.Msg.alert('提示', '请选择记录进行操作!'); return; } if (r.length == d.getCount()) return; if (d.indexOf(r[0]) == 0) return; for (var i = 0; i < r.length; i++) { idx = d.indexOf(r[i]) - 1; d.remove(r[i]); d.insert(idx, r[i]); } this.getSelectionModel().selectRow(idx); this.reconfigure(d, c); }, moveDown : function() { var d = this.getStore(); var c = this.getColumnModel(); var r = this.getSelectionModel().getSelections(); var idx; var idx; var len = r.length; if (len == 0) { Ext.Msg.alert('提示', '请选择记录进行操作!'); return; } if (len == d.getCount()) return; if (d.indexOf(r[len - 1]) == d.getCount() - 1) return; for (var i = 0; i < len; i++) { idx = d.indexOf(r[len - i - 1]) + 1; d.remove(r[len - i - 1]); d.insert(idx, r[len - i - 1]); } this.getSelectionModel().selectRow(idx); this.reconfigure(d, c); } });
8:自定义事件 来自我的ext群:23334375中的中国加油所写
- <script type="text/javascript">
- Ext.onReady(function(){
- Ext.ExtendPanel= Ext.extend(Ext.Panel,{
- initComponent:function(){
- Ext.ExtendPanel.superclass.initComponent.call(this);
- this.addEvents("click");
- },
- onRender: function(ct, position){
- Ext.ExtendPanel.superclass.onRender.apply(this, arguments);
- var c = this.body;
- c.on("click", this.onClick, this);
- },
- onClick:function(e){
- this.fireEvent("click", e);
- }
- });
- var ep=new Ext.ExtendPanel({
- renderTo:'panel',
- width:500,
- height:500,
- html:'点击试试',
- listeners:{
- click:function(e){
- alert("被点击了!"+e.getTarget());
- }
- }
- });
- });
- </script>
- </head>
- <body>
- <div id="panel"></div>
- </body>
- </html>
<script type="text/javascript"> Ext.onReady(function(){ Ext.ExtendPanel= Ext.extend(Ext.Panel,{ initComponent:function(){ Ext.ExtendPanel.superclass.initComponent.call(this); this.addEvents("click"); }, onRender: function(ct, position){ Ext.ExtendPanel.superclass.onRender.apply(this, arguments); var c = this.body; c.on("click", this.onClick, this); }, onClick:function(e){ this.fireEvent("click", e); } }); var ep=new Ext.ExtendPanel({ renderTo:'panel', width:500, height:500, html:'点击试试', listeners:{ click:function(e){ alert("被点击了!"+e.getTarget()); } } }); }); </script> </head> <body> <div id="panel"></div> </body> </html>
9:五步掌握Ext的拖放好文章地址:
http://blog.csdn.net/zhangxin09/archive/2010/05/03/5551665.aspx
10:Ext extend解释好文章
http://kaizhongfan.blog.163.com/blog/static/108708240201012411257716/
http://damoqiongqiu.iteye.com/blog/370591
11:用户界面与业务逻辑的解耦(来自:http://nickevin.iteye.com/blog/691340)
UI定义
- // Account.ui.js 定义UI
- AccountUi = Ext.extend(Ext.form.FormPanel, {
- title: 'Account',
- labelWidth: 100,
- labelAlign: 'left',
- layout: 'form',
- width: 600,
- frame: true,
- initComponent: function() {
- this.items = [
- {
- xtype: 'container',
- autoEl: 'div',
- layout: 'column',
- items: [
- {
- xtype: 'container',
- autoEl: 'div',
- layout: 'form',
- columnWidth: 0.5,
- items: [
- {
- xtype: 'textfield',
- fieldLabel: 'First Name',
- anchor: '95%',
- name: 'fname',
- ref: '../../fname'
- },
- {
- xtype: 'datefield',
- fieldLabel: 'Birth of day',
- anchor: '95%',
- name: 'birthday',
- ref: '../../birthday'
- }
- ]
- },
- {
- xtype: 'container',
- autoEl: 'div',
- layout: 'form',
- columnWidth: 0.5,
- items: [
- {
- xtype: 'textfield',
- fieldLabel: 'Last Name',
- anchor: '95%',
- name: 'lname',
- ref: '../../lname'
- },
- {
- xtype: 'combo',
- fieldLabel: 'Sex',
- anchor: '95%',
- name: 'sex',
- ref: '../../sex'
- }
- ]
- }
- ]
- },
- {
- xtype: 'htmleditor',
- anchor: '98%',
- fieldLabel: 'Memo',
- height: 150,
- width: 300,
- name: 'memo',
- ref: 'memo'
- }
- ];
- this.fbar = {
-
xtype: 'toolbar',
发表评论
-
Ext的Anchor布局
2011-03-04 15:38 2016Anchor布局的例子: //Anchor Layo ... -
Ext store 实现汉字排序
2011-02-25 14:32 1195Ext.data.Store应用中,有的时候我们对记录的某列进 ... -
store 的snapshot和data的区别
2011-02-25 11:10 1056文章转载自:http://www.iteye.com/topi ... -
Ext.extend的简单使用
2011-02-15 16:23 1085有些时候,Ext提供的组件已经不能满足我们的需要,这时我们就需 ... -
让Extjs加加速
2011-01-18 10:47 862Extjs虽然有着华丽的界面,但是真正使用过的人才知道,它运行 ... -
Gridpanel 实现 行提示例子
2010-12-15 17:14 1132<!DOCTYPE HTML PUBLIC " ... -
为Ext.form.Combox添加一个键盘事件
2010-12-15 13:59 1005在Ext中,我们可能要为一个组件添加一个键盘事件,下边儿就 ... -
关于EXT2.0 的Ext.form.VTypes的验证的扩展
2010-08-11 17:25 1529由于不同的需求,Ext.form.VTypes提供的验证规则 ...
相关推荐
ext实用例子,包括布局,界面,后台交互等等。里面的命名,方法堆放,值的传输都是按照公司要求的项目要求写的,相信能给你不少帮助
ext1.1的布局例子,对初学都很实用,下载解压即可运行,绝不骗人
Ext教程合集,入门以及一些实用的例子,适合想学习Ext后台开发的朋友
Extjs标签库,里面各种标签,很实用,有例子,有代码
个人写的ext小例子,初学者适合,很详细。
ext培训文档,适合对新手的帮助。包含ext的一些实用例子
java结合ext的例子,方便大家学习,功能简单但很实用
终于,找到了一个含的简明教程的资源,里面还有使用EXT使用手册(有两个版本的实用手册,内容基本相同,可是,却又有分别,所以都发了出来),还有几个实用的例子。所以,马上发了出来,希望能帮到大家。
里面包含ext 源码,开发文档,api, 实用例子,不过要耐心看的
ext4.0学习的例子,很多很实用,可以看看,多交流交流
Python3.5,django1.10实用例子,Python3.5连接数据库要注意的是用PyMysql,还有urls.py的转发规则代码有改动可以参考博文和具体代码http://blog.csdn.net/baidu_19473529/article/details/52634838
ajax,线程thread,subprocess调用系统命令,表单等例子。
两种树形菜单,用css,js,ext 等技术,是个很实用的例子,界面很不错
非常实用的框架,并且可以深入研究,本身自带各种例子!
ext-gantt破解版,jsp+hibernate+servlet+extjsgantt已破解,开发语言java,有所需sql(本案例mysql数据库),ext-gantt文档及api,只需简单移植就可复用到你的项目中,启动此项目后,在...很实用的extjs-gantt项目例子
1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装...
extjs实用开发指南,介绍了ext框架的很多例子,开发中所用到的控件几乎都有相对应的例子。
前段时间 很多问我EXTJS动态树型该如何实现 我就下了文挡 看看发现其实用EXTJS 实现树很简单 于是做了一个小小例子 教大家如何实现EXTJS 的树型
Ext2 核心 API 中文详解 Ext 2.02 - API文档中心(ajax网站提供) EXT2.0中文教程 Ext2.2docs.chm EXT 中文手册 EXT官方网站+中文教程 ext中文API+ sample....外加一个基于ext的ajax小例子,包括从前台到后台的完整调用
例子 假设您要下载的源代码。 从URL中获取扩展名的ID,在本例中为mihcahmgecmbnbcchbopgniflfhgnkff 。 然后只需运行以下命令,您就可以在当前目录中找到源代码。 $ ced mihcahmgecmbnbcchbopgniflfhgnkff 执照 ...