PDA

View Full Version : What is the Ext form element for multiple selection lists?



maya
4 Jun 2007, 2:49 AM
Hi,

I have a form with multiple selection lists. I would like to replace them with an Ext form element for multiple selection lists. Which element is right for this purpose? I need it to be an Ext.form element, so I can use the hiddenName property to create a hidden form element that contains the selections.

Thanks,
Maya

Nullity
4 Jun 2007, 5:16 AM
There isn't one. This feature has been requested by many people though (myself included), so hopefully it will be added soon.

maya
4 Jun 2007, 5:24 AM
So how can I implement inline edit in Grids, if some of my elements are multiple selection lists?

If I put a simple html code for a selection list (<select>...</select>) in a Grid's cell - the list cannot be opened.

Any suggestions?

Thanks

Animal
4 Jun 2007, 5:43 AM
Why can't you just render a <select> into the cell?

maya
4 Jun 2007, 7:02 AM
The problem in putting a <select> element into the Grid's cells is that the list cannot be opened - when I try to open the selection list - it is automatically closed.

Maybe this problem is related to a more general problem - all other form elements (e.g., text fields, text areas) cannot be edited when they are presented in Grid cells.

Please have a look at my code.

Thanks,
Maya

My code:
<code>
<!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
<div id="grid_panel" >
<div id="grid_table"></div>
</div>
<script type="text/javascript">
var grid;
var Example = {
init : function(){var myData = [
[1,'[G]',603,'<textarea wrap="physical" cols="60" rows="2" name="form_element_603g_field1" id="form_element_603g_field1" style="font-size: 8pt; font-family: Verdana; text-align: Left">shortage check report</textarea>','<textarea wrap="physical" cols="60" rows="2" name="form_element_603g_field2" id="form_element_603g_field2" style="font-size: 8pt; font-family: Verdana; text-align: Left">the system shall do a material availability check to every campaign and batch received from APS or created directely in production. The simulation will take into account multiple warehouses, multiple statuses include quarentine, multiple levels</textarea>','<select name="form_element_603g_field3" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="1" selected>No</option><option value="2" >Yes</option></select>','<select name="form_element_603l_field33" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="2" >Configuration</option><option value="3" >Customization</option><option value="4" >Personalization</option><option value="5" >Procedure</option><option value="6" >Process change</option><option value="7" selected>Report</option><option value="8" >Standard functionality</option><option value="9" >Work around</option><option value="10" >Interface</option><option value="11" >Data conversion</option><option value="12" >BIS Report</option></select>','<textarea wrap="physical" cols="20" rows="2" name="form_element_603l_field40" id="form_element_603l_field40" style="font-size: 8pt; font-family: Verdana; text-align: Left">discoverer report</textarea>','<select name="form_element_603l_field38" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" selected>Active</option><option value="2" >On hold</option><option value="3" >Postponed to future phase</option><option value="4" >Draft</option></select>','<select name="form_element_603l_field39" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" selected>High</option><option value="2" >Medium</option><option value="3" >Low</option><option value="4" >Nice to have</option></select>','<select name="form_element_603l_field23" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" >Phase 1</option><option value="2" >Phase 2</option><option value="3" selected>Phase 3</option><option value="4" >Phase 4</option><option value="5" >Phase 5</option><option value="6" >Phase 6</option><option value="7" >Phase 7</option><option value="9" >Phase 9</option></select>','<select name="form_element_603l_field22" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="2" >Yes</option><option value="3" >No</option></select>','<textarea wrap="physical" cols="20" rows="2" name="form_element_603l_field21" id="form_element_603l_field21" style="font-size: 8pt; font-family: Verdana; text-align: Left"></textarea>','<textarea wrap="physical" cols="20" rows="2" name="form_element_603l_field36" id="form_element_603l_field36" style="font-size: 8pt; font-family: Verdana; text-align: Left">discoverer report</textarea>','<textarea wrap="physical" cols="20" rows="2" name="form_element_603l_field37" id="form_element_603l_field37" style="font-size: 8pt; font-family: Verdana; text-align: Left"></textarea>','<select name="form_element_603l_field12" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" >GxP</option><option value="2" >SOX</option><option value="3" >Business</option><option value="4" >Nice to have</option></select>','<select name="form_element_603l_field13[]" multiple="yes" size="3" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="1">GxP</option><option value="2">SOX</option><option value="3">Business</option><option value="4">Nice to have</option></select>','<textarea wrap="physical" cols="20" rows="2" name="form_element_603l_field14" id="form_element_603l_field14" style="font-size: 8pt; font-family: Verdana; text-align: Left"></textarea>','<select name="form_element_603l_field15" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" >High</option><option value="2" >Medium</option><option value="3" >Low</option></select>','<select name="form_element_603l_field16" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" >High</option><option value="2" >Medium</option><option value="3" >Low</option></select>','<select name="form_element_603l_field17" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" >High</option><option value="2" >Medium</option><option value="3" >Low</option></select>','<input type="text" size="20" name="form_element_603l_field34" value="MY" style="font-size: 8pt; font-family: Verdana; text-align: Left">','<textarea wrap="physical" cols="20" rows="2" name="form_element_603l_field11" id="form_element_603l_field11" style="font-size: 8pt; font-family: Verdana; text-align: Left">URS-PE.05.01</textarea>','<select name="form_element_603l_field18" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" >1</option><option value="2" >2</option><option value="3" >3</option><option value="4" >4</option><option value="5" >5</option><option value="6" >6</option><option value="7" >7</option><option value="8" >8</option><option value="9" >9</option><option value="10" >10</option><option value="11" >11</option><option value="12" >12</option><option value="13" >13</option><option value="14" >14</option><option value="15" >15</option><option value="16" >16</option><option value="17" >17</option><option value="18" >18</option><option value="19" >19</option><option value="20" >20</option><option value="21" >21</option><option value="22" >22</option><option value="23" >23</option><option value="24" >24</option><option value="25" >25</option><option value="26" >26</option><option value="27" >27</option><option value="28" >28</option><option value="29" >29</option><option value="30" >30</option><option value="31" >31</option></select>','<select name="form_element_603l_field19" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="1" >Jan</option><option value="2" >Feb</option><option value="3" >Mar</option><option value="4" >Apr</option><option value="5" >May</option><option value="6" >Jun</option><option value="7" >Jul</option><option value="8" >Aug</option><option value="9" >Sep</option><option value="10" >Oct</option><option value="11" >Nov</option><option value="12" >Dec</option></select>','<select name="form_element_603l_field20" style="font-size: 8pt; font-family: Verdana; text-align: Left"><option value="" ></option><option value="2005" >2005</option><option value="2006" >2006</option><option value="2007" >2007</option><option value="2008" >2008</option></select>','<textarea wrap="physical" cols="20" rows="2" name="form_element_603l_field29" id="form_element_603l_field29" style="font-size: 8pt; font-family: Verdana; text-align: Left"></textarea>','<input type="checkbox" name="is_new603" value="0" checked>','rr 18-09-05 14:53','pp 08-06-06 11:45','pp 08-06-06 11:45'],[2,'[G]',625,'release batch','The system shall allow for the release of work orders from pending to WIP','No','Standard functionality','--','Active','High','Phase 3','--','--','batch form-tools-release','--','--','--','--','--','--','--','MY','URS-PE.09.01','--','--','--','--','--','rr 18-09-05 14:53','pp 08-06-06 11:45','pp 08-06-06 11:45']];var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({},
[
{name: 'grid_auto_num'},{name: 'grid_gl'},{name: 'grid_id'},{name: 'field1'},{name: 'field2'},{name: 'field3'},{name: 'field33'},{name: 'field40'},{name: 'field38'},{name: 'field39'},{name: 'field23'},{name: 'field22'},{name: 'field21'},{name: 'field36'},{name: 'field37'},{name: 'field12'},{name: 'field13'},{name: 'field14'},{name: 'field15'},{name: 'field16'},{name: 'field17'},{name: 'field34'},{name: 'field11'},{name: 'field18'},{name: 'field19'},{name: 'field20'},{name: 'field29'},{name: 'is_new'},{name: 'defined_by'},{name: 'last_user'},{name: 'local_last_user'} ])

});
ds.load();

var colModel = new Ext.grid.ColumnModel([
{header: '#', width: 25 , locked: false, dataIndex: 'grid_auto_num', hidden: false, sortable: true },{header: 'G/L', width: 25 , locked: false, dataIndex: 'grid_gl', hidden: false, sortable: true },{header: 'ID', width: 40 , locked: false, dataIndex: 'grid_id', hidden: false, sortable: true },{header: '*Name', width: 60 , locked: false, dataIndex: 'field1', hidden: false, sortable: true },{header: 'Description', width: 60 , locked: false, dataIndex: 'field2', hidden: false, sortable: true },{header: '*Is mandatory?', width: 60 , locked: false, dataIndex: 'field3', hidden: false, sortable: true },{header: 'Solution type', width: 60 , locked: false, dataIndex: 'field33', hidden: false, sortable: true },{header: 'Solution description', width: 60 , locked: false, dataIndex: 'field40', hidden: false, sortable: true },{header: 'Status', width: 60 , locked: false, dataIndex: 'field38', hidden: false, sortable: true },{header: 'Priority', width: 60 , locked: false, dataIndex: 'field39', hidden: false, sortable: true },{header: 'Phase', width: 60 , locked: false, dataIndex: 'field23', hidden: false, sortable: true },{header: 'Mandatory', width: 60 , locked: false, dataIndex: 'field22', hidden: false, sortable: true },{header: 'Solution doc.', width: 60 , locked: false, dataIndex: 'field21', hidden: false, sortable: true },{header: 'Navigation path', width: 60 , locked: false, dataIndex: 'field36', hidden: false, sortable: true },{header: 'Input data', width: 60 , locked: false, dataIndex: 'field37', hidden: false, sortable: true },{header: 'Primary Risk Category', width: 60 , locked: false, dataIndex: 'field12', hidden: false, sortable: true },{header: 'Secondary Risk Category', width: 60 , locked: false, dataIndex: 'field13', hidden: false, sortable: true },{header: 'Risk scenario', width: 60 , locked: false, dataIndex: 'field14', hidden: false, sortable: true },{header: 'Risk likelihood', width: 60 , locked: false, dataIndex: 'field15', hidden: false, sortable: true },{header: 'Risk impact', width: 60 , locked: false, dataIndex: 'field16', hidden: false, sortable: true },{header: 'Probability of detection', width: 60 , locked: false, dataIndex: 'field17', hidden: false, sortable: true },{header: 'Reviewed by', width: 60 , locked: false, dataIndex: 'field34', hidden: false, sortable: true },{header: 'BTB requirement reference', width: 60 , locked: false, dataIndex: 'field11', hidden: false, sortable: true },{header: 'Due: day', width: 60 , locked: false, dataIndex: 'field18', hidden: false, sortable: true },{header: 'Due: Month', width: 60 , locked: false, dataIndex: 'field19', hidden: false, sortable: true },{header: 'Due: year', width: 60 , locked: false, dataIndex: 'field20', hidden: false, sortable: true },{header: 'Comments', width: 60 , locked: false, dataIndex: 'field29', hidden: false, sortable: true },{header: 'Mark as accepted', width: 20 , locked: false, dataIndex: 'is_new', hidden: false, sortable: true },{header: 'Defined', width: 60 , locked: false, dataIndex: 'defined_by', hidden: false, sortable: true },{header: 'Modified', width: 60 , locked: false, dataIndex: 'last_user', hidden: false, sortable: true },{header: 'Local data modified by', width: 60 , locked: false, dataIndex: 'local_last_user', hidden: false, sortable: true }]);

// create the Grid
grid = new Ext.grid.Grid('grid_table', {
ds: ds,
cm: colModel,
enableColumnMove: false,
autoSizeColumns: true,
maxRowsToMeasure: 1,
autoSizeHeaders: false,
enableRowHeightSync: true,
trackMouseOver: true,
minColumnWidth: 10


});

var layout = Ext.BorderLayout.create({
center: {
margins:{left:0,top:0,right:0,bottom:0},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid_panel');

grid.render();

function bold(value){
return '<b>' + value + '</b>';
}}
};
Ext.onReady(Example.init, Example, true);
</script>
</code>