请求修改Rally自定义HTML：按c_ProductionDate筛选并添加导出按钮

一、修改思路 #

1. 替换筛选条件（Release → c_ProductionDate） #

• 定位原代码中Release筛选的核心逻辑：通常是Rally SDK的Filter配置或ComboBox绑定的过滤规则，比如类似{attribute: 'Release', operator: '=', value: selectedValue}的代码段
• 将筛选属性替换为自定义日期字段c_ProductionDate（注意自定义字段必须带c_前缀）
• 更换筛选控件：把原来的Release下拉框换成DatePicker组件（推荐用日期范围选择，实用性更强），示例配置：

// 示例：添加日期范围选择器
var startDatePicker = Ext.create('Rally.ui.DatePicker', {
    fieldLabel: '开始日期',
    listeners: {
        select: function(picker, date) {
            updateFilter(); // 选择日期后更新数据筛选
        }
    }
});
var endDatePicker = Ext.create('Rally.ui.DatePicker', {
    fieldLabel: '结束日期',
    listeners: {
        select: function(picker, date) {
            updateFilter();
        }
    }
});

• 更新过滤规则：针对日期字段调整运算符，筛选区间内的数据：

function updateFilter() {
    var startDate = startDatePicker.getValue();
    var endDate = endDatePicker.getValue();
    var filter = Ext.create('Rally.data.QueryFilter', {
        attribute: 'c_ProductionDate',
        operator: '>=',
        value: startDate
    }).and({
        attribute: 'c_ProductionDate',
        operator: '<=',
        value: endDate
    });
    // 将filter应用到数据网格或数据集
    grid.store.filter(filter);
}

2. 添加导出按钮 #

• 在HTML布局容器中添加导出按钮：

<div id="exportContainer">
    <button id="exportBtn">导出筛选后数据</button>
</div>

• 绑定点击事件，实现CSV导出（新手友好，无需第三方库）：

// 绑定按钮点击事件
Ext.get('exportBtn').on('click', function() {
    var store = grid.getStore();
    var data = store.getRange().map(record => {
        // 提取需要导出的字段，根据需求调整
        return {
            FormattedID: record.get('FormattedID'),
            Name: record.get('Name'),
            ProductionDate: record.get('c_ProductionDate')
        };
    });
    // 定义CSV表头
    var headers = ['FormattedID', 'Name', 'ProductionDate'];
    // 生成CSV内容
    const csvRows = [
        headers.join(','),
        ...data.map(row => headers.map(field => `"${row[field] || ''}"`).join(','))
    ];
    const csvContent = csvRows.join('\n');
    // 触发下载
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'rally_production_data.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
});

二、新手学习资源 #

• Rally App SDK 2.x 基础教程：官方文档的"Getting Started"系列，学习创建基础Rally应用，理解组件生命周期、数据查询、筛选逻辑
• 前端基础入门：先掌握HTML结构、CSS样式、JavaScript基础语法（变量、函数、DOM操作），这是修改自定义HTML的核心基础
• Rally自定义字段使用指南：学习Rally中自定义字段的命名规则（必须带c_前缀）、数据类型特性，以及如何在SDK中引用
• CSV导出基础：学习JSON转CSV的基本逻辑，理解Blob对象和浏览器下载触发的原理，这类技巧可复用在多个场景

内容的提问来源于stack exchange，提问作者Benjamin S