Ext JS 4实现带week(星期)的日期选择控件(实战二)

针对“Ext JS 4实现带week(星期)的日期选择控件(实战二)”这个话题，我可以给出以下的详细攻略。

1. 理解需求

在开始编写代码之前，首先要清楚需求是什么，即设计出一个带星期的日期选择控件。具体而言，这个控件需要包含以下几个元素：

• 日期选择器
• 显示星期的标签
• 可以选中日期的日历
• 响应用户选择的选中事件

2. 选择合适的 Ext JS 组件

在实现这个控件的过程中，我们可以使用 Ext JS 中提供的一些现成的组件来构建这个控件。例如：

• Ext.form.DateField: 日期选择器，可以设置日期范围和默认值
• Ext.toolbar.Toolbar: 工具栏，可以放置显示星期的标签
• Ext.picker.Date: 日历组件，可以选中日期并触发事件

3. 编写示例代码

接下来，我将给出两个示例代码，以辅助理解如何实现这个控件。注意，以下代码中包含了 Markdown 格式下的代码块，需要保留代码块中的缩进和换行符。

示例 1

首先，我们定义一个 Ext JS 应用程序，其中包含一个日期选择器和一个显示星期的工具栏。

    Ext.application({
        name: 'MyApp',
        launch: function() {
            Ext.create('Ext.form.Panel', {
                renderTo: Ext.getBody(),
                width: 400,
                height: 100,
                items: [{
                    xtype: 'datefield',
                    fieldLabel: '选择日期',
                    listeners: {
                        select: function(field, date) {
                            var dayOfWeek = date.format('l');  // 从日期中获取星期
                            Ext.getCmp('weekLabel').setText('星期' + dayOfWeek);  // 更新星期标签
                        }
                    }
                }, {
                    xtype: 'toolbar',
                    items: [{
                        id: 'weekLabel',
                        xtype: 'label',
                        text: '星期'
                    }]
                }]
            });
        }
    });

在这个示例中，我们创建了一个 Ext.form.Panel，它包含一个日期选择器和一个工具栏。在日期选择器的 select 事件中，我们从选中的日期中获取星期，然后通过 setText 方法更新星期标签的文本。

示例 2

下面是另一个示例代码，它使用 Ext.picker.Date 组件来实现一个可选中日期的日历，并且使用 Ext.grid.Panel 来显示选择的日期。

    Ext.application({
        name: 'MyApp',
        launch: function() {
            var store = Ext.create('Ext.data.Store', {
                fields: ['date'],
                data: []
            });

            var datepicker = Ext.create('Ext.picker.Date', {
                listeners: {
                    select: function(picker, date) {
                        store.add({ date: date });  // 添加选中日期到数据仓库
                    }
                }
            });

            var dategrid = Ext.create('Ext.grid.Panel', {
                title: '选择的日期',
                width: 400,
                height: 200,
                store: store,
                columns: [{
                    text: '日期',
                    dataIndex: 'date',
                    flex: 1
                }]
            });

            Ext.create('Ext.container.Viewport', {
                layout: 'vbox',
                items: [datepicker, dategrid]
            });
        }
    });

在这个示例中，我们首先创建了一个 Ext.data.Store，用于存储选中的日期。然后，我们创建了一个 Ext.picker.Date 组件，在 select 事件中将选中的日期添加到数据仓库中。最后，我们创建了一个 Ext.grid.Panel，用于显示数据仓库中的日期。

4. 总结

综上所述，以上示例代码可以帮助我们实现带星期的日期选择控件。在实践中，我们还可以根据实际需求进行调整和扩展，例如添加时区支持、格式化日期等。