将网格的特定行定位为第一行

时间:2018-04-12 09:04:49

标签: extjs

如何将grid中的特定行设置为网格中的第一行我尝试选择如下所示的行

var grid = interface.down('directorReviewGrid');
store.removeAll();
store.load({
    params: {
        workflow_stage: workflow_stage
    },
    callback: function(records, operation, success) {
        var rowIndex = this.find('id', id);
        /*where 'id': the id field of your model,
     record.getId() is the method automatically created by Extjs. 
    You can replace 'id' with your unique field.. And 'this' is your store.*/
        grid.getView().scrollRowIntoView(rowIndex);
        grid.getView().select(rowIndex);
    }
});

1 个答案:

答案 0 :(得分:1)

您可以使用store.insert( 0, records )来实施,特别是,您可以使用grid.getView().focusRow(rowIdx)

您可以签入此 FIDDLE 。希望这有助于/指导您实现您的要求。

CODE SNIPPET

var char = 'ABCDEFGHJKLIMNOPQRSTUVWXYZ';

function getRandomNumber() {
    return Math.floor(Math.random() * 26);
}

function getRandomName() {
    let name = '';
    for (let i = 0; i < 6; i++) {
        name += char.charAt(getRandomNumber());
    }
    return name;
}

function getData() {
    let data = [];
    for (let key = 0; key < 100; key++) {
        data.push({
            id: key,
            name: getRandomName()
        })
    }
    return data
}

Ext.create('Ext.data.Store', {

    storeId: 'gridstore',

    fields: ['id', 'name'],

    data: getData()

});

Ext.create('Ext.grid.Panel', {

    title: 'Focus to Row',

    store: 'gridstore',

    columns: [{
        text: 'ID',
        dataIndex: 'id'
    }, {
        text: 'Name',
        dataIndex: 'name',
        flex: 1
    }],

    height: window.innerHeight,

    renderTo: Ext.getBody(),

    tbar: ['->', {
        text: 'Move Selected Row to First',
        handler: function () {
            var grid = this.up('grid'),
                store = grid.getStore(),
                selctionM = grid.getSelectionModel(),
                rec = selctionM.getSelection()[0];

            //If selected record is available
            if (rec) {
                store.remove(rec) //First the remove the store

                store.insert(0, rec); //Insert into 1st postion

                selctionM.select(rec); //Select same record

                grid.getView().focusRow(rec); //Focuses a particular row and brings it into view. Will fire the rowfocus event.
            } else {
                Ext.Msg.alert('Info', 'Please select any row');
            }
        }
    }]
});