Ext.js实现单选按钮与网格列结合的支付方式选择功能

功能需求 #

• 实现支付方式选择功能，可选支付方式包括：
  • 信用卡
  • 银行转账
• 选中「信用卡」单选按钮后，下方需展示已添加信用卡的网格列表，效果参考示例图：网格包含卡号、有效期、默认标识、账单地址等列，顶部配有添加/删除/设置默认卡的操作按钮

现有信用卡网格代码 #

Ext.create('Ext.grid.Panel', {
    title: 'Your Payment Methods',
    id: 'PMGrid',
    minHeight: 230,
    width: 650,
    viewConfig: {
        enableTextSelection: true,
        deferEmptyText: false,
        emptyText: ' There are no credit cards currently.<br><br> Please add some by pressing the <b>Add Card</b> button.'
    },
    store: mstore1,
    realstore: store1,
    //selModel: { type: 'checkboxmodel' },
    //plugins: 'gridfilters',
    columns: [
        //{ text: 'No', dataIndex: 'Order', width: 50, filter: { type: 'string' }, align: 'center', },
        { text: 'Card', dataIndex: 'ccCardNumber', flex: 5, filter: { type: 'string' }, align: 'center', },
        { text: 'Expires', dataIndex: 'ValidTo', flex: 4.5, xtype: 'datecolumn', format: "m / Y", align: 'center', },
        {
            text: 'Default', dataIndex: 'Order', flex: 4, align: 'center', renderer: function (o) {
                return o == 1 ? '<strong style="color:green">Yes</strong>' : '';
            }
        },

        //{ text: 'Remove', dataIndex: '', width: 90 },
        //{ text: 'UPO', dataIndex: 'UserPaymentOptionId', width: 80  },
        //{ text: 'Name', dataIndex: 'HolderName', width: 200  },
        { text: 'Billing Address', dataIndex: 'BillingAddress', flex: 12, width: 200 },

    ],
    //bbar: { xtype: 'pagingtoolbar', store: mstore1, displayInfo: true, inputItemWidth: 50, doRefresh: function () { store1.reload() } },
    tbar: [
        //{ text: 'Add New Card', tooltip: 'Add a new card for automated monthly payments', handler: createWin_AddNewCard }, '-',
        { xtype: 'button', text: 'Add Card', tooltip: 'Add new card', width: 120, handler: function () { Ext.getCmp('AddCard').show() } }, '-',
        { text: 'Remove Card', id: 'bRemove', tooltip: 'Remove selected cards', width: 120, handler: RemoveUPOClick, disabled: true }, '-',
        { text: 'Set Default', id: 'bDefault', tooltip: 'Set Default and move to top', width: 120, handler: Move2TopClick, disabled: true },
    ]
});

内容的提问来源于stack exchange，提问作者Simeon Georgiev