Thursday, 15 January 2015

hyperlink - Extjs4 link click functionality error -


I am working in extjs4. I have a gridview as = =

  {margin: '100 0, xtype:' grid ', id:' g2 ', // headline:' academic description ', store:' Qb .qbquestionoptionStore ', columns: [{text:' options', dataIndex: 'option', flex: 1}, {text: 'answer', dataIndex: 'isAnswer', flex: 2.5}, {header: 'edit' Renderer: Function (Val) {Return '& lt; A href = "#" id = "edit" & gt; Edit & lt; / A & gt; '; }}, {Header: 'Remove', Renderer: Function (Val) {Return '& lt; A href = "#" id = "remove" & gt; Remove & lt; / A & gt; '; }}   

To delete these above-mentioned edits and links I wrote the code in the controller -

deleterrow: function (cmp) {cmp.mon (cmp.getEl) (), 'Click', function (event, target) {

  if (target.id == 'edit') {console.log ('edit'); listview = Ext.getCmp ('G2'); listview.on ({itemClick: works (dv, record, item, index, e, ops) {var view = Ext.widget ('useredit'); view.down ('form'). LoadRecord (Record);}}}} if (target.id == 'remove') {// warning ("hello"); listview = ext.getCmp ('g2'); listview.on ({itemClick: function ( DV), record, item, index, e, ops) {// var grid = button.up ('h 3 '); var store = listview.getStore (); var selected = listview.getSelectionModel () .getSelection (); console log (selected); if (selected & amp; amp; selected.label == 1) {store. Remove (selected); console.log (store);}}}};}}, this, {representative: "a"});},   

But on both links clicks, The same editing link functionality is being implemented. So how to perform specific functions on specific link clicks?

This is not an ideal way to achieve this functionality. You are using the html id attribute, which is theoretically supposed to use one time only on one page. Besides, you are doing some unnecessary hacks, just click on Dom elements to add events, and this is not the best practice.

There are 2 possibilities here. First of all, you can use Ext.grid.column.Action , which allows you to use the handler function for each action. There is a clear way, and it can look crisp with good icons for editing / removing them. They have accurate scenarios in the examples of Cacha, and you can see the document here:

Adding a onclick attribute, and whatever Called the required panel on the ripe controller, going through the correct arguments:

  {header: 'edit', renderer: function (val, meta, rec) {return '& lt ; A href = "#" Onclick = "MyApp.app.getController (\ 'MyController \') Edit ('+ rec.get (' id ') +')" & gt; Edit & lt; / A & gt; '; }}, {Header: 'Remove', Renderer: Function (Val) {Return '& lt; A href = "#" onclick = "MyApp.app.getController (\ 'MyController \'). Delete ('+ rec.get (' id ') +')" & gt; Remove & lt; / A & gt; '; }}   

Then, in your controller, you can retrieve that record based on ID and what to do with it:

  EditRow: function (record id) {var view = Ext.widget ('useredit'), record = Ext.getCmp ('g2'). GetStore () FindExact ('id', recordId); View.down ('form') loadRecord (record) }, Deleted route: function (record id) {var store = Ext.getCmp ('g2'). Getstore (), record = store.findExact ('id', recordId); Store.remove (record); }    

No comments:

Post a Comment