Ext.js 5实现含文本框、图片选择器及网格的表单可行性咨询

Absolutely, your requirements are totally achievable in Ext.js 5! The framework’s built-in form components, editable grids, and flexible data handling are designed exactly for these kinds of use cases. Since you’re already familiar with jQuery+Ajax and Salesforce Commerce Cloud integrations, you’ll adapt to Ext.js patterns quickly. Let’s break down the implementation and share useful resources:

Step-by-Step Implementation Breakdown #

1. Basic Text Field Form #

Start with an Ext.form.Panel to host your standard text inputs. This mirrors the form structure you’re used to building with jQuery:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Product Record Form',
    width: 600,
    bodyPadding: 10,
    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'Record Name',
            name: 'recordName',
            allowBlank: false,
            width: 400
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Description',
            name: 'description',
            width: 400
        }
        // Add additional text fields as needed
    ]
});

2. Custom Backend-Driven Image Picker #

Build a custom trigger field that fetches images from your backend via Ext.Ajax and lets users select one. Here’s a simplified example:

Ext.define('MyApp.view.CustomImagePicker', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customimagepicker',
    
    triggerCls: 'x-form-search-trigger', // Use a search icon for the trigger
    
    onTriggerClick: function() {
        // Fetch image data from your SFCC backend
        Ext.Ajax.request({
            url: '/your-sfcc-backend-image-endpoint',
            method: 'GET',
            success: function(response) {
                var imageData = Ext.decode(response.responseText);
                
                // Popup a window with image thumbnails
                var selectionWindow = Ext.create('Ext.window.Window', {
                    title: 'Select an Image',
                    width: 500,
                    height: 400,
                    layout: 'fit',
                    items: [{
                        xtype: 'dataview',
                        store: Ext.create('Ext.data.Store', {
                            data: imageData,
                            fields: ['id', 'url', 'altText']
                        }),
                        tpl: '<tpl for="."><div class="image-thumb" data-id="{id}"><img src="{url}" alt="{altText}" style="width:100px;height:100px;margin:5px;cursor:pointer;" /></div></tpl>',
                        itemSelector: '.image-thumb',
                        listeners: {
                            itemclick: function(view, record) {
                                // Set the selected image ID in the field
                                this.setValue(record.get('id'));
                                selectionWindow.close();
                            },
                            scope: this
                        }
                    }]
                }).show();
            }
        });
    }
});

Add this custom picker to your form like any other field:

{
    xtype: 'customimagepicker',
    fieldLabel: 'Select Image',
    name: 'selectedImageId',
    width: 400
}

3. Editable Grid for Product Weight Records #

Ext.js 5’s Ext.grid.Panel with the CellEditing plugin supports adding rows, editing cells, and loading existing data. Here’s how to build it:

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    title: 'Product Weight Records',
    width: 600,
    height: 300,
    store: Ext.create('Ext.data.Store', {
        fields: ['productId', 'productName', 'weight'],
        // For edit mode: load existing data when needed
        // store.load({ url: '/load-existing-product-records', params: { recordId: yourRecordId } });
    }),
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    columns: [
        {
            text: 'Product',
            dataIndex: 'productName',
            width: 250,
            editor: {
                xtype: 'combo',
                store: Ext.create('Ext.data.Store', {
                    proxy: {
                        type: 'ajax',
                        url: '/your-sfcc-product-endpoint'
                    },
                    fields: ['id', 'name']
                }),
                displayField: 'name',
                valueField: 'id',
                allowBlank: false,
                forceSelection: true
            }
        },
        {
            text: 'Weight',
            dataIndex: 'weight',
            width: 150,
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 0
            }
        },
        {
            xtype: 'actioncolumn',
            width: 80,
            items: [{
                icon: 'delete-icon.png', // Replace with your delete icon path
                tooltip: 'Remove Product',
                handler: function(grid, rowIndex) {
                    grid.getStore().removeAt(rowIndex);
                }
            }]
        }
    ],
    tbar: [{
        text: 'Add Product',
        handler: function() {
            var store = this.up('grid').getStore();
            // Add empty row for new product selection
            store.add({ productName: '', weight: 0 });
        }
    }]
});

4. Save & Edit Workflow #

• New Record: Collect form values with form.getValues() and grid store data with grid.getStore().getData(), then submit everything to your backend via Ext.Ajax.post.
• Edit Record: Load the main record data into the form with form.loadRecord(record), and fetch the associated product weight data to populate the grid’s store using store.load().

Helpful Resources & Support Channels #

Since you’re new to Ext.js 5, these channels will speed up your learning:

• Ext.js 5 Official Documentation: The official docs have detailed examples for every component—search for Ext.form.Panel, Ext.grid.Panel, and Ext.Ajax for deep dives.
• Sencha Community Forums: Search for threads tagged with extjs5 for existing discussions about editable grids, custom form fields, and backend integrations. You can also post your specific questions here.
• Stack Overflow: Tag your questions with extjs and extjs5—the community is active and helps with everything from component setup to debugging Ajax calls.
• Sencha Commercial Support: If you have a Sencha license, their official support team can provide tailored guidance for complex integrations with Salesforce Commerce Cloud.

内容的提问来源于stack exchange，提问作者Trevor Miles Wagner