参考 ExtJS 文件中的 html-button答案

【问题标题】：refer to html-button in ExtJS file参考 ExtJS 文件中的 html-button
【发布时间】：2011-09-23 08:24:32
【问题描述】：

在 jsp 文件中，创建一个表单，其中指定了一个按钮。

我正在使用 ExtJS 4。我需要在 ExtJS 文件中获取 html 按钮的引用。单击此 html 按钮后，在页面上显示 Ext 组件（网格面板）。我尝试使用 Ext.DomQuery 但没有运气。请指点

也发布在 ExtJS4 论坛http://www.sencha.com/forum/showthread.php?148205-refer-to-html-button-in-ExtJS-script&p=652122

谢谢， -Divya

下面的代码sn-p：

report.jsp

<%@ page import="java.util.*" %>
<%@ page import="java.io.PrintWriter" %>
<%
 some java code
%>
<link rel="stylesheet" type="text/css"
href="../js/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../js/extjs4/shared/example.css" />
<script type="text/javascript" src="../js/extjs4/bootstrap.js"></script>
<script type="text/javascript" src="../js/extjs4_scripts/report/reportPanel.js">         
</script>

<form name="reportpage" id="prcr" method="post" action="url">
<table>
<tr>
<td>
<input id=\"osSubmitButton\" type=\"button\" name=\"submitRelease\" value=\"Submit\">
</td>
</tr>
</table>
</form>

reportPanel.js

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../extjs4/ux/');
Ext.require([
'Ext.DomQuery.*',
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.grid.FiltersFeature',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function() {

Ext.tip.QuickTipManager.init();

var btn=Ext.query("#osSubmitButton");
    btn.on("click", function(){
         console.info("clicked");
        relstore.load();
        reportPanel.setVisible(true);
    });

});

【问题讨论】：

标签： html extjs4

【解决方案1】：

由于您知道按钮的 id，您可以调用 Ext.get。

Ext.get('osSubmitButton').on('click', ...);

【讨论】：