我正在使用自定义HTML拉力网格来开发一个必须返回一些统计信息的表。我的JavaScript在我的HTML头部被调用，我正在body标签中创建一个表。所以，我的JavaScript使用字段id在表中设置值。问题是：正在加载表，但是当Rally.launchApp方法运行时，表就会消失。奇怪的是，如果我检查字体代码，表仍然存在。
<!DOCTYPE html>
<html>
<head>
<title>Grid With Freeform Data Example</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var firstMetricResult;
var secondMetricResult;
var firstMetricName = "% of user stories assigned story points";
var secondMetricName = "Average story points per user story ";
var currentProjectName = Rally.environment.getContext().getProject().Name;
var currentProjectNameID = document.getElementById("currentProjectNameID");
currentProjectNameID.value = currentProjectName;
var benchmark = 20;
var storiesQuery = Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
fetch: ['PlanEstimate', 'LastUpdateDate'],
filters: [
{property: 'ScheduleState',
operator: '=',
value: 'Accepted'},
{property: 'DirectChildrenCount',
operator: '=',
value: '0'},
{property: 'AcceptedDate',
operator: '<',
value: 'LastMonth'},
{property: "Iteration.Name",
operator: "!contains",
value: "hardening"},
{property: "Iteration.Name",
operator: "!contains",
value: "regression"},
{property: "Iteration.Name",
operator: "!contains",
value: "stabilization"}
]
});
storiesQuery.load({
callback: function(records, operation) {
if(operation.wasSuccessful()) {
var estimatedStoriesCount = 0;
Ext.Array.each(records, function(record){
if (record.get('PlanEstimate') != null){
estimatedStoriesCount++;
}
});
var storiesCount = records.length;
firstMetricResult = (estimatedStoriesCount*100)/storiesCount;
alert(firstMetricResult);
}
}
});
var estimatedStoriesQuery = Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
fetch: ['PlanEstimate', 'LastUpdateDate'],
filters: [
{property: 'PlanEstimate',
operator: '!=',
value: 'null'},
{property: 'ScheduleState',
operator: '=',
value: 'Accepted'},
{property: 'DirectChildrenCount',
operator: '=',
value: '0'},
{property: 'AcceptedDate',
operator: '<',
value: 'LastMonth'}
]
});
estimatedStoriesQuery.load({
callback: function(records, operation) {
if(operation.wasSuccessful()) {
var astoriesCount = records.length;
var storiesPointsSum = 0;
Ext.Array.each(records, function(record){
storiesPointsSum += record.get('PlanEstimate');
});
secondMetricResult = storiesPointsSum/astoriesCount;
alert(secondMetricResult);
}
}
});
}
});
Rally.launchApp('CustomApp', {
name: 'Grid With Freeform Data Example'
});
});
</script>
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<table border=1 class='gridtable' id="tab1">
<tr>
<th> Team </th>
<td><b>All prior periods</b></td>
<td><b>All prior periods</b></td>
</tr>
<tr>
<td id="currentProjectNameID">
</td>
</tr></table>
</body>
</html>
我决定使用这个简单的HTML表格，因为我希望能够编辑CSS。
感谢。
答案 0 :(得分：1)
如果您使用Ext网格或拉力网格，您仍然可以修改CSS - 除了使用普通的CSS选择器来设置网格样式之外，您还可以在创建网格时访问某些属性 - 列的渲染器功能将meta作为其第二个参数，它具有一个名为tdCls的属性，您可以使用该属性来设置该列中的单元格样式。例如：
.green > .x-grid-cell-inner {
border : 1px solid #afd3b6;
background : #c6efce;
background : -moz-linear-gradient(top, #c6efce 0%, #afd3b6 100%);
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6efce), color-stop(100%,#afd3b6));
background : -webkit-linear-gradient(top, #c6efce 0%,#afd3b6 100%);
background : -o-linear-gradient(top, #c6efce 0%,#afd3b6 100%);
background : -ms-linear-gradient(top, #c6efce 0%,#afd3b6 100%);
background : linear-gradient(to bottom, #c6efce 0%,#afd3b6 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6efce', endColorstr='#afd3b6',GradientType=0 );
}
{
text : 'State',
dataIndex : 'c_WINListState',
editor : 'stateeditor',
renderer : function(value, meta, record) {
if (value === 'At Risk') {
meta.tdCls = 'yellow';
} else if (value === 'Off Track') {
meta.tdCls = 'red';
} else if (value === 'On Track') {
meta.tdCls = 'green';
} else if (value === 'Complete') {
meta.tdCls = 'grey';
}
return value;
}
},
我建议使用内置功能。</ p>
话虽如此，我认为这是内置功能的原因 - 如果你看一下SDK，启动应用功能说明：
创建并执行指定的应用。在应用程序代码开始执行之前，确保已加载所有必需组件并且DOM已准备就绪。一旦加载了所有必需的依赖项，就会调用启动方法。
答案 1 :(得分：1)
以上答案是正确的。通常在使用应用程序（和ExtJS）时，大多数内容是通过javascript创建的，而不是字面上声明的dom。
查看本指南，了解有关处理应用内容的更多信息：https://developer.help.rallydev.com/apps/2.0rc1/doc/#!/guide/add_content
如果您仍然在手动dom操作中出售，那么这样的事情应该有效：
launch: function() {
this.add({
xtype: 'component',
html: [
'<table border=1 class="gridtable" id="tab1">',
'<tr>',
'<th> Team </th>',
'<td><b>All prior periods</b></td>',
'<td><b>All prior periods</b></td>',
'</tr>',
'<tr>',
'<td id="currentProjectNameID"></td>',
'</tr>',
'</table>'
].join('')
});
},
afterRender: function() {
this.callParent(arguments);
//the rest of your code that used to be in launch here
}
然后你应该能够通过id查找元素并按照你的意愿操纵它们。