ExtJs 3.x 以编程方式滚动 ListView

Posted 2023-02-26

【中文标题】ExtJs 3.x 以编程方式滚动 ListView

【英文标题】：ExtJs 3.x scrolling ListView programmatically

【发布时间】：2011-05-30 11:50:13

【问题描述】：

以下代码直接来自 3.x 示例。

谁能帮助我移动列表视图主体的脚本，就好像它正在滚动一样？

谢谢， 乔什

Ext.onReady(function()
    var store = new Ext.data.JsonStore(
        fields: ['name', 'url', name:'size', type: 'float', name:'lastmod', type:'date', dateFormat:'timestamp'],
        data : ["name":"dance_fever.jpg","size":2067,"lastmod":1265631056000,"url":"images\/thumbs\/dance_fever.jpg"
                ,"name":"gangster_zack.jpg","size":2115,"lastmod":1265631056000,"url":"images\/thumbs\/gangster_zack.jpg"
                ,"name":"kids_hug.jpg","size":2477,"lastmod":1265631056000,"url":"images\/thumbs\/kids_hug.jpg"
                ,"name":"kids_hug2.jpg","size":2476,"lastmod":1265631056000,"url":"images\/thumbs\/kids_hug2.jpg"
                ,"name":"sara_pink.jpg","size":2154,"lastmod":1265631056000,"url":"images\/thumbs\/sara_pink.jpg"
                ,"name":"sara_pumpkin.jpg","size":2588,"lastmod":1265631056000,"url":"images\/thumbs\/sara_pumpkin.jpg"
                ,"name":"sara_smile.jpg","size":2410,"lastmod":1265631056000,"url":"images\/thumbs\/sara_smile.jpg"
                ,"name":"up_to_something.jpg","size":2120,"lastmod":1265631056000,"url":"images\/thumbs\/up_to_something.jpg"
                ,"name":"zack.jpg","size":2901,"lastmod":1265631056000,"url":"images\/thumbs\/zack.jpg"
                ,"name":"zacks_grill.jpg","size":2825,"lastmod":1265631056000,"url":"images\/thumbs\/zacks_grill.jpg"
                ,"name":"zack_dress.jpg","size":2645,"lastmod":1265631056000,"url":"images\/thumbs\/zack_dress.jpg"
                ,"name":"zack_hat.jpg","size":2323,"lastmod":1265631056000,"url":"images\/thumbs\/zack_hat.jpg"
                ,"name":"zack_sink.jpg","size":2303,"lastmod":1265631056000,"url":"images\/thumbs\/zack_sink.jpg"]
    );

    var listView = new Ext.list.ListView(
        id      : 'listview',
        store: store,
        multiSelect: true,
        emptyText: 'No images to display',
        columns: [
            header: 'File',
            width: .45,
            dataIndex: 'name'
        ,
            header: 'Last Modified',
            xtype: 'datecolumn',
            format: 'm-d h:i a',
            width: .3, 
            dataIndex: 'lastmod'
        ,
            header: 'Size',
            dataIndex: 'size',
            tpl: 'size:fileSize',
            align: 'right',
            cls: 'listview-filesize'
        ]
    );

    // put it in a Panel so it looks pretty
    var panel = new Ext.Panel(
        id:'images-view',
        width:425,
        height:250,
        collapsible:true,
        resizable : true,
        layout:'fit',
        title:'Simple ListView <i>(0 items selected)</i>',
        items: listView
    );
    panel.render(document.body);
);

【参考方案1】：

以下代码假设您希望将 listView 向下滚动 50 像素。

var listView = Ext.get('listView'); 
var listViewBody = listView.el.child('.x-list-body'); 
listViewBody.scroll('down', 50);