In Ext, double-click the gridpanel. The edit box is displayed.

I will discuss the implementation ideas here. You are welcome to share your own better methods and learn together.
Double-click the row to pop up the edit box. First, read all the information, but the grid is displayed.

Actually, the read columns include

 VaR vote_list_cm  =     New  Ext. Grid. columnmodel (  //  For column definition, CM is short for it. As the column mode of a real table, you must first create  
  [  New  Ext. Grid. rownumberer (), vote_list_sm,
{Header:  "  Questionnaire name "  , Width:  250  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Votename  '  },
{Header:  "  Questionnaire Information  " , Width:  200  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Votedetail  '  },
{Header:  "  Creation Time  "  , Width: 200  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Systemdatetime  '  ,
Renderer: Ext. util. format. daterenderer (  '  Y-m-d  '  )},
{Header: "  End Time  "  , Width:  200  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Endtime  '  ,
Renderer: Ext. util. format. daterenderer (  ' Y-m-d  '  )},
{Header:  "  Status  "  , Width:  100  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Isstatus '  , Renderer: isstatus },
{Header:  "  Number of votes allowed by the same IP address  "  , Width:  200  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Submittimes '  },
{Header:  "  Priority  "  , Width:  100  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Ordernum  ' },
{Header:  "  IP address limit  "  , Width:  100  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Iprestrict  ' },
{Header:  "  Restriction type  "  , Width:  100  , Sortable:  True  , Align:  '  Center  '  , Dataindex:  '  Restricttype  ' },
{
Xtype:  '  Actioncolumn  '  ,
Width:  50  ,
Items :[{
Icon:  '  ../Scripts/ext3.0/examples/shared/icons/fam/delete.gif  '  ,  //  Use a URL in the icon config  
 Tooltip:  '  Disable  '  ,
Handler: forbid
},{
Icon:  '  ../Scripts/ext3.0/examples/shared/icons/fam/accept.png  '  ,  //  Use a URL in the icon config  
  Tooltip:  ' Enable  '  ,
Handler: function (grid, rowindex, colindex ){
VaR rec  =  Store. getat (rowindex );
Alert (  "  Bytes  "     +  Rec.  Get  (  '  Company '  ));
}
}]
}
]); 

You can hide columns that are not displayed first:

 Vote_list_grid.getcolumnmodel (). sethidden (  3  ,  True  );  //  Read all the column information, but it cannot be directly displayed (the column number starts from 0)  
  Vote_list_grid.getcolumnmodel (). sethidden (  8  ,  True );
Vote_list_grid.getcolumnmodel (). sethidden (  9  ,  True  );
Vote_list_grid.getcolumnmodel (). sethidden (  10  ,  True  ); 

Next, we will write the double-click dialog box event:

 
Vote_list_grid.on ('Rowdblclick', Function (){
Handler: {editfunc ();}
});//Double-click the row of the gridpanel and execute the function.
 

Functions of editfunc:

 VaR editfunc  =  Function (){
VaR row  =  Ext. getcmp (  "  Gridid  "  ). Getselectionmodel (). getselections ();
  If  (Row. Length  =  1  )
{
Rows  = Row [  0  ];  //  Assign the information of the selected row to rows for easy display.  
  Editvotewin. Show ();  //  Determine whether a row is selected. The problem is whether the row is successfully selected or will be run here.  
  }
}; 

EditvotewinCode:

 VaR editvotewin  =     New Ext. Window ({
Title:  '  Edit Questionnaire  '  ,
Width:  417  ,
Height:  384  ,
Closeaction:  '  Hide  '  ,
Layout:  '  Form  ' ,
Buttonalign:  '  Center  '  ,
Resizable:  False  ,
Constrain:  True  ,
Plain:  True  ,
Modal:  '  True  '  ,
Items: editvoteform,
Listeners :{
  " Show  "  : Function (){
Addvoteform. getform (). Reset ();  //  Add box Initialization  
  Editvoteform. getform (). loadrecord (rows );  //  Load a row of data directly and display the data assigned by rows.  In the edit box(Key)
  }
},
Buttons: [...]
}); 

Double-click the grid column to display the basic principle of the edit box. Hope to help you.