1. #1
    Sencha User enotsl's Avatar
    Join Date
    Jul 2007
    Posts
    42
    Vote Rating
    0
    enotsl is on a distinguished road

      0  

    Default how to move the grid's row up and down?

    how to move the grid's row up and down?


    I have two button to control the grid's rows, one is move up, and the other is move down,

    I want to move the selected row move up/down to the be/next row, when i click the move button,

    I find the api document, but no found any methods about that,

    pleast give me some help, thanks!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Read the API docs for RowSelectionModel:

    Code:
    grid.getSelectionModel().selectPrevious()/selectNext()

  3. #3
    Sencha User enotsl's Avatar
    Join Date
    Jul 2007
    Posts
    42
    Vote Rating
    0
    enotsl is on a distinguished road

      0  

    Default


    maybe i am no say the question clear,

    I want to move the seleted the row move up/down, let me draw

    before move up
    --------------------
    row1
    --------------------
    row2 (this selected row)
    --------------------

    after move

    --------------------
    row2 (be move up to row1)
    --------------------
    row1
    --------------------


  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      1  

    Default


    OK, that's something entirely different.

    Try:
    Code:
    function moveSelectedRow(grid, direction) {
    	var record = grid.getSelectionModel().getSelected();
    	if (!record) {
    		return;
    	}
    	var index = grid.getStore().indexOf(record);
    	if (direction < 0) {
    		index--;
    		if (index < 0) {
    			return;
    		}
    	} else {
    		index++;
    		if (index >= grid.getStore().getCount()) {
    			return;
    		}
    	}
    	grid.getStore().remove(record);
    	grid.getStore().insert(index, record);
    	grid.getSelectionModel().selectRow(index, true);
    }

  5. #5
    Sencha User enotsl's Avatar
    Join Date
    Jul 2007
    Posts
    42
    Vote Rating
    0
    enotsl is on a distinguished road

      0  

    Default


    oh, hoho,

    it's working prefect, thanks!

  6. #6
    Ext User
    Join Date
    May 2009
    Posts
    1
    Vote Rating
    0
    FunkyDude is on a distinguished road

      0  

    Default


    it would be nice to see the code to update the db as well..

    In my case, i have a 'position' attribute in db i need to update it each time a user clicks on move up or move down buttons

  7. #7
    Sencha User jaisonjames's Avatar
    Join Date
    Jul 2010
    Posts
    67
    Vote Rating
    1
    jaisonjames is on a distinguished road

      0  

    Default


    I think this will help me, but how it will implement in a array grid?

    Quote Originally Posted by Condor View Post
    OK, that's something entirely different.

    Try:
    Code:
    function moveSelectedRow(grid, direction) {
    	var record = grid.getSelectionModel().getSelected();
    	if (!record) {
    		return;
    	}
    	var index = grid.getStore().indexOf(record);
    	if (direction < 0) {
    		index--;
    		if (index < 0) {
    			return;
    		}
    	} else {
    		index++;
    		if (index >= grid.getStore().getCount()) {
    			return;
    		}
    	}
    	grid.getStore().remove(record);
    	grid.getStore().insert(index, record);
    	grid.getSelectionModel().selectRow(index, true);
    }

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by jaisonjames View Post
    I think this will help me, but how it will implement in a array grid?
    Strange question... the code is independent of the reader that is used by the store.

    ps. 'direction' should be -1 or +1.

  9. #9
    Sencha User jaisonjames's Avatar
    Join Date
    Jul 2010
    Posts
    67
    Vote Rating
    1
    jaisonjames is on a distinguished road

      1  

    Default


    Sorry, I don't have much experience in extjs. Below my code is it possible to integrate that function for move move up and ove down button?

    var myData = [
    ['My Issues Report','Open Issues','1-Extra Small','Filter_open_issues','None','No','','',''],
    ['My Task Report','Late Task','2-Small','Filter_Late_Tasks','None','No','','',''],
    ['All Project List','High Priority Projects for BU-ABC','3-Medium','Filter_High_priority','BU_ABC','Yes','','',''],
    ['Resource Load','DBA Workload','4-Large','Filter_Roal_DBA','None','Daily','1/1/2010','3/31/2010',''],
    ['Resource Load','Dev Workload','5-Extra Large','Filter_Roal_Dev','None','Weekly','','','this month'],
    ['','','6-Extra Extra Large','','','','','','']
    ];



    // create the data store
    var store = new Ext.data.ArrayStore({
    fields: [
    {name: 'component'},
    {name: 'name'},
    {name: 'size'},
    {name: 'filter'},
    {name: 'target'},
    {name: 'frequency'},
    {name: 'fromDate'},
    {name: 'toDate'},
    {name: 'relativeDate'}
    ]
    });

    // manually load local data
    store.loadData(myData);

    var componentsconfig = new Ext.grid.GridPanel({
    store: store,
    columns: [
    {id:'company',header: '<b>Component</b>', sortable: true},
    {header: '<b>Display Name</b>', sortable: true},
    {header: '<b>Size</b>', sortable: true},
    {header: '<b>Filter</b>', sortable: true},
    {header: '<b>Target</b>', sortable: true},
    {header: '<b>Frequency</b>', sortable: true},
    {header: '<b>From Date</b>', sortable: true},
    {header: '<b>To Date</b>', sortable: true},
    {header: '<b>Relative Dates</b>', sortable: true}
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 370,
    width: '100%',
    title: 'Component Configuration',
    bbar:[
    {xtype: 'tbfill'},
    {
    icon: '../image/reportui/icon-grid-deleteRow.png',
    tooltip:'Delete Selected Row',

    },
    {
    icon: '../image/reportui/icon-grid-moveup.png',
    tooltip:'Move to Up Selected Row'

    },
    {
    icon: '../image/reportui/icon-grid-movedown.png',
    tooltip:'Move to Down Selected Row'

    }

    ]
    })

    Ext.applyIf(this, {
    layout : 'fit',
    width: '100%'
    ,items: [{
    region:'west',
    width: '100%',
    items : [componentsconfig]
    // Hbox layout with filter options and available icons
    }]
    })



    Quote Originally Posted by Condor View Post
    Strange question... the code is independent of the reader that is used by the store.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Code:
    {
      icon: '../image/reportui/icon-grid-moveup.png',
      tooltip:'Move to Up Selected Row',
      handler: function(){
        moveSelectedRow(componentsconfig, -1);
      }
    },