在 ExtJS 中跟踪按钮

Question

我是一名网络工程师，试图在网页上提供SSO方法。在SSO项目上工作，我发现自己处于一个不断学习的圈子里，到目前为止，我学到了很多东西，比如基本的html，JS和HTTP协议。

无论如何，用 ExtJS 编写的网页，正如您可能猜到的那样，有几个输入框和它们下面的按钮。我不熟悉 ExtJS，当我查看源代码时，我找不到按钮的事件/触发器。在跟踪此按钮时，我尝试在执行时间 (Chrome( 中添加中断代码，但"click"事件没有触发。"鼠标按下"事件帮助我在代码执行时添加了中断。但是由于缺乏对ExtJS的了解，我无法理解代码。此外，这看起来不像经典的html表单，因为没有与"表单"相关的标签。到目前为止，我已经设法填写了输入框，但找不到调用该按钮的正确方法。

页面上的输入框。

<input class="x-input-el x-input-text x-form-field login_input_username_icon" type="text" id="ext-element-19" autocapitalize="none" autocomplete="off" autocorrect="off" name="UserName" placeholder="Name">
<div class="x-unsized x-field-input" id="ext-input-3"><input class="x-input-el x-input-password x-form-field login_input_password_icon" type="password" id="ext-element-25" autocapitalize="none" name="Password" placeholder="Password"><div class="x-field-mask" style="display: none !important;" id="ext-element-26"></div><div class="x-clear-icon" id="ext-element-27"></div></div>
<div class="x-unsized x-field-input" id="ext-input-4"><input class="x-input-el x-form-field x-input-text" type="text" id="ext-element-31" autocapitalize="sentences" name="Company" placeholder="Company"><div class="x-field-mask" style="" id="ext-element-32"></div><div class="x-clear-icon" id="ext-element-33"></div></div>

这些是用于填充这些输入框的Javascript代码。

document.getElementById('ext-element-19').value="John"
document.getElementById('ext-element-25').value="Secret"
document.getElementById('ext-element-31').value="C-Corp"

和按钮：

<div class="x-button-normal x-button button_green x-layout-box-item x-stretched" id="btnGo" style="margin: 20px 0px 0px !important;"><span id="ext-element-46" class="x-badge" style="display: none;"></span><span class="x-button-icon x-hidden" id="ext-element-48"></span><span id="ext-element-47" class="x-button-label" style="">Enter</span></div>

在 ExtJS 的"视图"中

{
xtype: "button",
id: "btnGo",
text: "Enter",
cls: "button_green",
margin: "20px 0px 0px 0px"
},

如果我能找到调用/单击该按钮的正确方法，我相信我可以在将 javascript 代码发送到客户端浏览器之前在响应时间内注入它。

• 我怎样才能进一步研究？
• 在这种情况下如何跟踪按钮？

谢谢你的时间。

Answer 1

负责侦听经典 ExtJS 应用程序中的点击事件的代码通常位于controller中。控制器文件肯定会包含字符串extend: 'Ext.app.Controller'。你的按钮有一个id(btnGo(，所以很可能代码负责创建侦听器看起来像这样：

...
this.control({
...
'#btnGo' :{
click: this.login //method name will may vary
},
...
});
...

在我的示例中，login方法必须包含用于发送授权请求的逻辑。