javascript Extjs 仅将单元格文本向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19024274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs allign only cell text to right
提问by kuldarim
i need to align cell text to right side.
我需要将单元格文本与右侧对齐。
{
xtype : 'numbercolumn',
dataIndex : 'lineAmount',
id : 'lineAmount',
header : 'Net Line amount',
sortable : true,
width : 150,
summaryType : 'sum',
css: 'text-align: rigth;',
summaryRenderer : Ext.util.renderers.summary.sum,
editor : {
xtype : 'numberfield',
allowBlank : false
}
adding align property does not work for me because it also aligns header text
添加 align 属性对我不起作用，因为它还会对齐标题文本
采纳答案by Dev
As answered Mr_Green you can align the text to the right or left using align. For header to remain centrally aligned use css as :
作为回答 Mr_Green 您可以使用 align 将文本向右或向左 对齐。要使标题保持居中对齐，请使用 css 为：
.x-column-header-inner{
text-align:center;
}
Update:
更新：
.....//
.....//
{
xtype : 'grid',
cls : 'gridCss',
...//other configs
}
.....//
.....//
In your app.css file :
在您的 app.css 文件中：
.gridCss .x-column-header-inner{
text-align:center;
}
In your index.jsp
在你的 index.jsp
<link rel="stylesheet" type="text/css" href="app/resources/css/app.css">
回答by Mr_Green
There is a config present for numbercolumnknown as align. just use that.
有一个numbercolumn名为align. 就用那个。
Whenever you are stuck refer the secha docs which is beautifully designed just for beginners.
每当您遇到困难时，请参考专为初学者设计的精美文档 secha 文档。
I am assuming you are beginner and explaining you how to use docs.. for your clear understanding:
我假设您是初学者并解释您如何使用 docs.. 以便您清楚地理解：
- First go to search field, to search for a component, method, or event or something else.
- 首先转到搜索字段，搜索组件、方法或事件或其他内容。
- In your case, let us assume that you have searched for "numbercolumn", then you can see the following window which displays all the cofigs, properties, methods etc.. Just hover on them and know what "numbercolumn" is related with.
- In your case, you are looking for a config which align's the text to right. then you are mostly looking for key words like txtAlign, align, textAlign, etc..
- Hence, you will find a config, which is by name "align". just click on it to learn more about it.
- 在您的情况下，让我们假设您已经搜索了“ numbercolumn”，那么您可以看到以下窗口，其中显示了所有配置、属性、方法等。只需将鼠标悬停在它们上即可知道“ numbercolumn”与什么相关。
- 在您的情况下，您正在寻找一个将文本向右对齐的配置。那么你主要是在寻找诸如 txtAlign、align、textAlign 等关键词。
- 因此，您会找到一个名为“ align”的配置。只需单击它即可了解更多信息。
- After learning about the cofig "align", you might want to test it. For this purpose, the docs have provided inline code editor which is shown in the below image.
- The code editor has two tabs, "code editor" and "live preview". The words says everything.
- Just add your changes in "code editor" tab and see your result in "live preview" tab.
- 在了解配置文件“ align”之后，您可能想要测试它。为此，文档提供了内联代码编辑器，如下图所示。
- 代码编辑器有两个选项卡，“代码编辑器”和“实时预览”。话说明了一切。
- 只需在“代码编辑器”选项卡中添加更改，然后在“实时预览”选项卡中查看结果。
- For example, Adding
align: "right"code in the below "code editor".
- 例如，
align: "right"在下面的“代码编辑器”中添加代码。
Updated
更新
CSS:
CSS：
.columnAlign{
text-align: right;
}
extjs
extjs
tdCls: "columnAlign",
回答by kuldarim
Actually thanks both guys for your posts it helped me alot. I have found one solution myself.
实际上，感谢两个人的帖子，这对我帮助很大。我自己找到了一种解决方案。
I needed to add id property to my column. For example :
我需要将 id 属性添加到我的列中。例如 ：
{
xtype : 'numbercolumn',
dataIndex : 'lineAmount',
id : 'lineAmount',
header : 'Net Line amount',
}
and then it has its own css class for example : .x-grid3-td-lineAmountso i added suggested css to these classes and it working ok now for me
然后它有自己的 css 类，例如： .x-grid3-td-lineAmount所以我向这些类添加了建议的 css，现在它对我来说工作正常
.x-grid3-hd-inner{
text-align: left;
}
.x-grid3-hd-lineAmount{
text-align: left;
}
.x-grid3-td-lineAmount{
text-align: right;
}
.x-grid3-hd-taxAmount{
text-align: left;
}
.x-grid3-td-taxAmount{
text-align: right;
}
.x-grid3-hd-invoiceAmount{
text-align: left;
}
.x-grid3-td-invoiceAmount{
text-align: right;
}
i think in 4.2 version it is better to use @Mr_Green solution, but in 3.4 this workarround works for me :)
我认为在 4.2 版本中最好使用 @Mr_Green 解决方案，但在 3.4 中，此解决方法对我有用:)
