大佬教程收集整理的这篇文章主要介绍了javascript – 如何在Ext.Panel标题中放置文本和可点击的图标?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我发现了一些old hacks from 2008 to do this,但可以想象,较新版本的ExtJS允许您以更直接的方式将文本和图标放在面板标题中.
在Ext.Panel标题中放置文本和可点击图标的最直接方法是什么?
附录
感谢@Stefan工作,这是我的解决方案:
使用Javascript:
var grid_shopping_cart = new Ext.grid.GridPanel({ headerCfg: { tag: 'div',cls: 'x-panel-header',children: [ { tag: 'div',cls: 'panel_header_main','html': 'Shopping Cart' },{ tag: 'div',cls: 'panel_header_icon1','html': '<img src="images/icon_plus.png" />' },cls: 'panel_header_extra','html': 'Order number: 2837428347' } ] },width: 600,height: 390,... listeners: { 'afterrender' : function(p) { p.header.on('click',function(e,h) { alert('you clicked the plus'); },p,{ delegate: '.panel_header_icon1',stopEvent: true }); },...
CSS:
div.panel_header_main { text-align: left; float: left; } div.panel_header_extra { text-align: left; float: right; margin-right: 10px; } div.panel_header_icon1 { text-align: right; float: right; margin-left: 3px; cursor: hand; cursor: pointer; } div.panel_header_icon2 { text-align: right; float: right; margin-left: 3px; cursor: hand; cursor: pointer; }
...,headerCfg: { tag: 'div',children: [ { tag: 'div',cls: 'my-title',cls: 'my-status','html': 'Status: on <img src="status.png" />' } ] },...
必须在afterrender事件中添加可单击行为,例如:
function(p) { p.header.on('click',h) { },{ delegate: '.my-status',stopEvent: true }); }
当然,你需要一些CSS来标题标题…
以上是大佬教程为你收集整理的javascript – 如何在Ext.Panel标题中放置文本和可点击的图标?全部内容,希望文章能够帮你解决javascript – 如何在Ext.Panel标题中放置文本和可点击的图标?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。