本文介绍了如何在ExtJS面板的标题中放置一个下拉列表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我可以将HTML元素如文本和图像放在面板标题中,如下所示:
I can put HTML elements such as text and images in a panel header like this:
var grid = new Ext.grid.GridPanel({ region: 'center', style: 'margin: 10px', store: new Ext.data.Store({ data: myData, reader: myReader }), 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" />' }, { tag: 'div', cls: 'panel_header_icon2', 'html': '<img src="images/icon_pencil.png" />' }, { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' } ] },看起来不错:
但是当我添加下拉元素这不是像这样的纯HTML:
but when I add dropdown element that is not plain HTML like this:
var grid = new Ext.grid.GridPanel({ region: 'center', style: 'margin: 10px', store: new Ext.data.Store({ data: myData, reader: myReader }), 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" />' }, { tag: 'div', cls: 'panel_header_icon2', 'html': '<img src="images/icon_pencil.png" />' }, { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' }, { width: 100, xtype: 'combo', mode: 'local', value: 'en', triggerAction: 'all', forceSelection: true, editable: false, fieldLabel: 'Produkt', name: 'language', hiddenName: 'language', displayField: 'name', valueField: 'value', store: new Ext.data.JsonStore({ fields : ['name', 'value'], data : [ {name : 'German', value: 'de'}, {name : 'English', value: 'en'}, {name : 'French', value: 'fr'} ] }) } ] },它呈现脚本进入标题:
it renders script into the header:
是否可以将非HTML元素放在面板的标题中?如果是这样,它是如何做的?
推荐答案你可能更好的把你的组合放在网格的工具栏。工具栏扩展Ext.Container,因此更适合包含其他Ext组件。尝试以下操作:
You're probably better off placing your combo in the grid's toolbar. Toolbars extend Ext.Container and are therefore much better suited for containing other Ext components. Try the following:
var grid = new Ext.grid.GridPanel({ region: 'center', style: 'margin: 10px', store: new Ext.data.Store({ data: myData, reader: myReader }), tbar: new Ext.Toolbar({ ctCls: 'panel-header', items: [ { xtype: 'tbfill' }, { tag: 'div', cls: 'panel_header_main', 'html': 'Shopping Cart' }, { tag: 'div', cls: 'panel_header_icon1', 'html': '<img src="images/icon_plus.png" />' }, { tag: 'div', cls: 'panel_header_icon2', 'html': '<img src="images/icon_pencil.png" />' }, { tag: 'div', cls: 'panel_header_extra', 'html': 'Order Number: 2837428347' }, { width: 100, xtype: 'combo', mode: 'local', value: 'en', triggerAction: 'all', forceSelection: true, editable: false, fieldLabel: 'Produkt', name: 'language', hiddenName: 'language', displayField: 'name', valueField: 'value', store: new Ext.data.JsonStore({ fields : ['name', 'value'], data : [ {name : 'German', value: 'de'}, {name : 'English', value: 'en'}, {name : 'French', value: 'fr'} ] }) } ] }),更多推荐
如何在ExtJS面板的标题中放置一个下拉列表?
发布评论