Question

我在供应商软件中看到以下代码（当我查看源代码时）。看起来这个信息在某处是硬编码的，并且没有简单的方法来改变对齐。

但是我有权在页面的页眉/页脚添加Javascript。我需要添加什么脚本才能正确引用渲染的ButtonPanel并将对齐方式从右向左更改。

<script type="text/javascript">
Ext.onReady(function(){
    var buttonPanel = new Ext.Panel({
        renderTo: 'imbuttonpanel_0',
        border: false,
        buttonAlign: 'right',
        unstyled: true,
        fbar: {
            xtype: 'toolbar',
            hideBorders: true,
            items: [
    {
        id: 'action.standardsearch.select',
        text: 'Select',
        handler: function(){imSubmitAction('action.standardsearch.select', '1', false);}
    }
,
    {
        id: 'action.standardsearch.cancel',
        text: 'Cancel',
        cls: 'ca-gray',     handler: function(){imSubmitAction('action.standardsearch.cancel', '1', false);}
    }

            ]
        }
    });
 } );
</script>

我没有extJS技能，我添加了以下块（紧随其后），但没有成功：

<script type="text/javascript">
Ext.onReady(function(){
        buttonPanel.buttonAlign = 'left';
 } );
</script>

我在调试器中看到以下错误：

错误：ReferenceError：未定义buttonPanel

感谢您的帮助和时间。

编辑2：供应商确认上述代码位于Jar文件中。他们进一步声明并且没有问我可能使用JS引用元素并改变对齐。

在进一步检查代码时，我在上面的JS代码上面找到了以下DIV元素，buttonPanel正在使用＆＃34; renderTo：＆＃39; imbuttonpanel_0＆＃39;＆＃34;＆＃39;属性。但同样，DIV元素不使用任何CSS，它也似乎在源代码中也是硬编码的。下面是完全如View Source中所见的DIV。

<div id="imbuttonpanel_0">


</div>

所以我很兴奋，我应该能够使用JS引用DIV元素并改变DIV本身的对齐方式，这可能会迫使buttonPanel向左移动。但遗憾的是，它也没有用。我将以下JS行添加到页脚（通过GUI界面）：

<script type="text/javascript">
    document.getElementById("imbuttonpanel_0").setAttribute('align', 'left');
    //document.getElementById("imbuttonpanel_0").style.marginLeft = "50px";
</script>

编辑3：尝试更改默认行为的原因：“搜索”页面显示包含相当多列的结果表。每条记录的Select Radio / Check复选框位于最左侧。选择/取消按钮位于最右侧，在较小的屏幕/较低分辨率下，用户必须向右滚动才能进入“选择”按钮。

Answer 1

由于buttonPanel是函数中的var，因此该函数之外的任何代码都无法访问它。但是，由于JS的效果是生成HTML和CSS，因此您应该能够找到相应的HTML / CSS并在发出后更改对齐样式。

因此，onReady()函数的本质应该是找到并更改HTML / CSS，而不是尝试更改JavaScript对象。

与@Hayk（其“答案”应该是评论）相反，我不认为这是一个根本不正确的事情，特别是在你不喜欢的情况下。 t控制现有的源，即设置对齐开始。

使用JavaScript更改extJS ButtonPanel对齐方式

1 个答案: