EXTJS || 在GridPanel中实现复选框选择模型时需要帮助

Question

I am facing problem while implementing the below mentioned functionality in EXTJS 4.1:

1. I have implemented Ext.selection.CheckboxModel to enable the user to select any row from the existing rows in the GridPanel.
2. On click of the check box of this selection model the User will be prompt with EDIT & DELETE buttons alongside the checkbox in the grid itself.
3. On clicking EDIT , the data from the respective(checked) row will move to the below FormPanel. Thus giving user the privilege to alter the entered data.
4. On clicking DELETE , the respective(checked) row will be deleted from the GridPanel .

I am able to create the checkboxes in the grid using CheckboxModel, but not able to proceed ahead with the requirement.

I have tried various examples and suggestions from the Sencha/Google, however still not able to find any solution for the same.

Any examples/pointers will be highly appreciated in this scenario.

Answer 1

This is how I would solve this problem :

Next to the checkbox column put an actioncolumn with the two buttons. Give the actioncolumn a fixed width. Set a custom style for the two items ( buttons ), like on selected show. Style the buttons with css to display only on selected rows.

columns: [{
    xtype: 'actioncolumn',
    width: 40,
    items: [{
        iconCls: 'onselect-show',
...

css:

.onselect-show {display: none;} // hide
.x-grid-row-selected .onselect-show {display: inline;} // restore default

By the way, I see a contradiction in your requirements. The buttons you're talking about don't make sense when more than one row is selected, but the checkbox selection model is specifically intended for multiple selection.
What about using instead onfocused-show together with x-grid-row-focused ? This would allow for multiple selections and still displaying the buttons on only one row, the one that has the focus.