ext 中的图片点击事件问题？？？？

我的小黑 2008-11-21 05:06:59
这是我.ftl里面的代码


<#assign ctx=springMacroRequestContext.getContextPath()>

<#include "/include/taglibs.ftl">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <#include "/include/meta.ftl"/>

    <title>客户信息管理</title>

    <#include "/include/extjs.ftl"/>

    <script type="text/javascript" src="${ctx}/widgets/kongjia/Ext.customer.FormUtils.js"></script>

    <script type="text/javascript" src="${ctx}/widgets/kongjia/Ext.customer.JsonGrid.js"></script>

    <script type="text/javascript" src="${ctx}/widgets/crm/customer.js"></script>

    

  </head>

  <body>

    <div id="loading">

      <div class="waitting">请稍候...</div>

    </div>

    <div id="tabs">

      <div id="tab1">

        <div id="lightgrid" style="border: 0px solid #cccccc; overflow: hidden; width:auto;height:100%;"></div>

      </div> 

    </div>

    <div id = "tabshop" style="display:none;height:500" >

    	<div id="lightgridshop" style="border: 0px solid #cccccc; overflow: hidden; width:500;height:600;"></div>

    </div>

    <div id="shop">

    <iframe id='shop1'  frameborder='no'style="border: 0px solid #cccccc; overflow: hidden; width:755;height:382;" scrolling='yes'></iframe>

    </div>

    <div id="content" style="display:none" >

        <table width="653" border="0" align="center" cellpadding="0" valign="middlen">

  <tr height="50%">

    <td> </td>

  </tr>

  <tr>

    <td width="30%" align="right"><label for="cusId" style="font-size:12px;">客户编码：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="cusId" size="18" />

    </div></td>

    <td width="30%" align="right"><label for="cusName" style="font-size:12px;">客户姓名：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="cusName" size="18" />

    </div></td>   

  </tr>

  <tr>

    <td width="30%" align="right"><label for="parent" style="font-size:12px;">上级客户：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="parent" size="18" /><img id='parentDialog' src="../widgets/crm/img/grid.png"></img>  //注意这里！！！！(A处)

    </div></td>

  </tr>

  <tr style="display:none">

    <td width="30%" align="right" width="30%"><label for="id" style="font-size:12px;">id：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="id" size="12" readonly="true" />

    </div></td>

  </tr>

  <tr height="50%">

    <td> </td>

  </tr>

</table>

    </div>

    

 

    <div id="error_message" style="display:block"></div>



  </body>

</html>

下面是我.js里面的代码


Ext.onReady(function() {



	// 开启提示功能

	Ext.QuickTips.init();

	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());



	// 布局管理器

	var layout = new Ext.BorderLayout(document.body, {

		center : {

			autoScroll : true,

			titlebar : false,

			tabPosition : 'top',

			closeOnTab : true,

			alwaysShowTabs : true,

			resizeTabs : true,

			fillToFrame : true

		}

	});



	// 设置布局

	layout.beginUpdate();

	layout.add('center', new Ext.ContentPanel('tab1', {

		title : '客戶信息管理',

		toolbar : null,

		closable : false,

		fitToFrame : true

	}));

	// layout.add('center', new Ext.ContentPanel('tab2', {

	// title : "帮助",

	// toolbar : null,

	// closable : false,

	// fitToFrame : true

	// }));

	layout.restoreState();

	layout.endUpdate();

	layout.getRegion("center").showPanel("tab1");

	var toolbarData = new Array();

	var metaData = [{

		id : 'id',

		qtip : "ID",

		vType : "integer",

		mapping : 'id',

		defValue : -1,

		showInGrid : false

	}, {

		id : 'cusId',

		qtip : '客户编码',

		vType : 'chn',

		allowBlank : false

	}, {

		id : 'cusName',

		qtip : "客户姓名",

		vType : "chn",

		allowBlank : false

	}, {

		id : 'cusProperty',

		qtip : '客户类型',

		vType : "comboBox",

		values : [{

			id : '0',

			name : 'XX'

		}, {

			id : '1',

			name : 'YY'

		}],

		defValue : '0',

		mapping : "cusProperty"

	}, {

		id : 'cusLevel',

		qtip : '客户级别',

		vType : "comboBox",

		values : [{

			id : '0',

			name : '一级'

		}, {

			id : '1',

			name : '二级'

		}, {

			id : '2',

			name : '三级'

		}],

		defValue : '0',

		mapping : "cusLevel"

	}, {

		id : 'parent',

		qtip : '上级客户',

		vType : "chn",

		allowBlank : true

	}];



	//注意下面的这段代码----------

Ext.EventManager.addListener("parentDialog", 'click', handleClick);

	 

	 function handleClick(){

	 alert("test")

	 }

//------------------------------



   

 var show = function(){  

     alert("Hi!");  

 };

	// 创建表格

	// 创建表格



	var lightGrid = new Ext.customer.JsonGrid("lightgrid", {

		metaData : metaData,

		dialogContent : "content",

		dialogWidth : '780',

		dialogHeight : '480',

		titles : ['XX信息', 'XX信息', 'XX人', 'XX', 'XX'],

		id : 'content',

		genHeader : true

	});

	// 渲染表格

	lightGrid.render();



})


运行程序后，点击那个图片，没有反应，事件不能出发，为什么呢？？高手解决？？



版主:kokobox
动作:帮助lz改一下代码效果
...全文
423 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
hyblusea 2010-02-22
  • 打赏
  • 举报
 回复
我的小黑 2008-11-26
  • 打赏
  • 举报
 回复
知道原因了
在Ext.lingo.FormUtils.js中增加一个针对这个输入框input的代码


var isApply = true;

	return {

		// 创建<input type="text">输入框

		createPopField : function(meta) {



			var field = new Ext.form.TriggerField({

				allowBlank : meta.allowBlank == undefined

						? false

						: meta.allowBlank,

				vtype : meta.vType,

				width : meta.vWidth,

				id : meta.id,

				name : meta.id,

				triggerClass:"x-form-date-trigger",

				readOnly : true,

				style:"background:#E0E0E0;",

				//triggerClass:"x-form-date-trigger",

				defValue : meta.defValue,

				onTriggerClick : meta.query,

				mapping : meta.mapping

			})

			

			if (isApply) {

				field.applyTo(meta.id);

			}

			if (meta.defValue) {



				field.setValue(meta.defValue);

			}

			 

			return field;

		},

		createTextField : function(meta) {



			var field = new Ext.form.TextField({

				allowBlank : meta.allowBlank == undefined

						? false

						: meta.allowBlank,

				vtype : meta.vType,

				maxLength : meta.maxLength ? meta.maxLength : Number.MAX_VALUE,

				cls : meta.type == "password" ? meta.cls : null,

				width : meta.vWidth,

				id : meta.id,

				name : meta.id,

				style : (meta.vType == "integer" || meta.vType == "number"

						? "text-align: right;"

						: ""),

				readOnly : meta.readOnly,

				defValue : meta.defValue,

				alt : meta.alt,

				minLength : meta.minLength ? meta.minLength : 0,

				minValue : meta.minValue ? meta.minValue : 0,

				maxValue : meta.maxValue ? meta.maxValue : Number.MAX_VALUE,

				mapping : meta.mapping

			});



			if (meta.readOnly) {

				field.style += "background:#E0E0E0;";

			}

			if (isApply) {

				field.applyTo(meta.id);

			}

			if (meta.defValue) {



				field.setValue(meta.defValue);

			}

			return field;

在对应的表单字段生成里面也加入了


if (meta.vType == "pop") {

	var field = Ext.lingo.FormUtils

	.createPopField(meta);

	columns[meta.id] = field;

}


----------------------------------------------
修改后


<#assign ctx=springMacroRequestContext.getContextPath()>

<#include "/include/taglibs.ftl">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <#include "/include/meta.ftl"/>

    <title>客户信息管理</title>

    <#include "/include/extjs.ftl"/>

    <script type="text/javascript" src="${ctx}/widgets/kongjia/Ext.customer.FormUtils.js"></script>

    <script type="text/javascript" src="${ctx}/widgets/kongjia/Ext.customer.JsonGrid.js"></script>

    <script type="text/javascript" src="${ctx}/widgets/crm/customer.js"></script>

    

  </head>

  <body>

    <div id="loading">

      <div class="waitting">请稍候...</div>

    </div>

    <div id="tabs">

      <div id="tab1">

        <div id="lightgrid" style="border: 0px solid #cccccc; overflow: hidden; width:auto;height:100%;"></div>

      </div> 

    </div>

    <div id = "tabshop" style="display:none;height:500" >

        <div id="lightgridshop" style="border: 0px solid #cccccc; overflow: hidden; width:500;height:600;"></div>

    </div>

    <div id="shop">

    <iframe id='shop1'  frameborder='no'style="border: 0px solid #cccccc; overflow: hidden; width:755;height:382;" scrolling='yes'></iframe>

    </div>

    <div id="content" style="display:none" >

        <table width="653" border="0" align="center" cellpadding="0" valign="middlen">

  <tr height="50%">

    <td> </td>

  </tr>

  <tr>

    <td width="30%" align="right"><label for="cusId" style="font-size:12px;">客户编码：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="cusId" size="18" />

    </div></td>

    <td width="30%" align="right"><label for="cusName" style="font-size:12px;">客户姓名：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="cusName" size="18" />

    </div></td>   

  </tr>

  <tr>

    <td width="30%" align="right"><label for="parent" style="font-size:12px;">上级客户：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="parent" size="18" >

      //把首贴中的那行删除了

    </div></td>

  </tr>

  <tr style="display:none">

    <td width="30%" align="right" width="30%"><label for="id" style="font-size:12px;">id：</label></td>

    <td><div class="x-form-item">

      <input name="text" type="text" id="id" size="12" readonly="true" />

    </div></td>

  </tr>

  <tr height="50%">

    <td> </td>

  </tr>

</table>

    </div>

    

 

    <div id="error_message" style="display:block"></div>



  </body>

</html>


对应的


Ext.onReady(function() {



    // 开启提示功能

    Ext.QuickTips.init();

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());



    // 布局管理器

    var layout = new Ext.BorderLayout(document.body, {

        center : {

            autoScroll : true,

            titlebar : false,

            tabPosition : 'top',

            closeOnTab : true,

            alwaysShowTabs : true,

            resizeTabs : true,

            fillToFrame : true

        }

    });



    // 设置布局

    layout.beginUpdate();

    layout.add('center', new Ext.ContentPanel('tab1', {

        title : '客戶信息管理',

        toolbar : null,

        closable : false,

        fitToFrame : true

    }));

    // layout.add('center', new Ext.ContentPanel('tab2', {

    // title : "帮助",

    // toolbar : null,

    // closable : false,

    // fitToFrame : true

    // }));

    layout.restoreState();

    layout.endUpdate();

    layout.getRegion("center").showPanel("tab1");

    var toolbarData = new Array();

    var metaData = [{

        id : 'id',

        qtip : "ID",

        vType : "integer",

        mapping : 'id',

        defValue : -1,

        showInGrid : false

    }, {

        id : 'cusId',

        qtip : '客户编码',

        vType : 'chn',

        allowBlank : false

    }, {

        id : 'cusName',

        qtip : "客户姓名",

        vType : "chn",

        allowBlank : false

    }, {

        id : 'cusProperty',

        qtip : '客户类型',

        vType : "comboBox",

        values : [{

            id : '0',

            name : 'XX'

        }, {

            id : '1',

            name : 'YY'

        }],

        defValue : '0',

        mapping : "cusProperty"

    }, {

        id : 'cusLevel',

        qtip : '客户级别',

        vType : "comboBox",

        values : [{

            id : '0',

            name : '一级'

        }, {

            id : '1',

            name : '二级'

        }, {

            id : '2',

            name : '三级'

        }],

        defValue : '0',

        mapping : "cusLevel"

    }, {

        id : 'parent',

	qtip : '上级客户',

	query : popParent,//注意这里popParent是一个Function

	vType : "pop",    //注意这里

	allowBlank : true

    }];



    //注意下面的这段代码----------     

     function popParent(){

     alert("test")

     }

//------------------------------



   

 var show = function(){  

     alert("Hi!");  

 };

    // 创建表格

    var lightGrid = new Ext.customer.JsonGrid("lightgrid", {

        metaData : metaData,

        dialogContent : "content",

        dialogWidth : '780',

        dialogHeight : '480',

        titles : ['XX信息', 'XX信息', 'XX人', 'XX', 'XX'],

        id : 'content',

        genHeader : true

    });

    // 渲染表格

    lightGrid.render();



})


jsnjfzm 2008-11-25
  • 打赏
  • 举报
 回复
友情up
qap22 2008-11-25
  • 打赏
  • 举报
 回复
友情up
vss2008 2008-11-25
  • 打赏
  • 举报
 回复
不懂，帮顶
android2008 2008-11-25
  • 打赏
  • 举报
 回复
不懂，帮顶
kokobox 2008-11-25
  • 打赏
  • 举报
 回复
可能这里用ext的人少吧

到官方网站找一找吧。
我的小黑 2008-11-25
  • 打赏
  • 举报
 回复
无人响应?
showde123 2008-11-22
  • 打赏
  • 举报
 回复
又见web开发
我的小黑 2008-11-21
  • 打赏
  • 举报
 回复
晕，有2个地方加了颜色，结果没起作用
注意这里[color=#FF0000]
ext 实现 滚动 看板 点击 展示 图片
1，效果如图 2，思路 实现左右滚动 其实元素并没有滚动 只是调整了 viewModel 中的数据的位置  在左右两个按钮的点击事件 分别调整 viewModel 中的数组 是往前位移 还是往后 位移  点击数据块 显示 图片 是在点击的时候 改变图片块绑定的图片的路径 同时 给被点击的数据块切换样式  滚动的时候 也分别将前面或者后面的数据块的样式切换了  3，主要代码 /
ExtJs6 为Ext.Img对象添加单机事件
项目主页头部工具栏最后显示当前登陆用户的名字和头像，头像是用Ext.Img做的，需要点击头像可以修改个人信息，但是查看api一圈并未找到click或dblclick事件，这我就纳闷了，为啥这么常用的两个事件居然没有，然后我就想能否手动添加上这个事件。 然后我先是给xtype : 'image'添加了render事件，然后在rander事件里面写添加事件方法： toolbar部分： items : [
[Ext JS]图片显示方式
在上面的场景中， 就需要导入图片进行显示了。 而在Ext JS应用中， 要实现图片的显示，可以使用的方式有以下四种： 1. 最原生的方式： 使用HTML的img 标签 2. 使用Ext JS的Container 类型组件，设置的html 中使用HTML的img 标签 3. 使用Ext JS的image 组件 4. 在Ext JS 样式中设置背景图...
Extjs6图片控件功能扩展，增加tip和点击事件
如何让我们的图片也能点击，类似imagebutton一样，还有可以显示tips，和按钮一样，这就需要在事件里做文章。废话不多说，直接上代码。 {                                     xtype : 'image',                                     src : "../MainView/newView/images/...
Ext事件
添加和删除事件 使用addEvent可以添加事件，简写on。 使用removeEvent删除事件，简写un。 使用purgeListeners()移除所有事件。   代码示例： var fn = function() {         // TODO     };     //un是removeEvent的简写。用于移除一个事件。     p....
Web 开发

81,114

社区成员

341,728

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章