------------------------------------------------------------------------------------------------------------------
//ListPagingView插件可以对List组件中的内容进行分页显示，该插件所实现的分页方式与传统方式不同，它采用滚动分页方式，即页面打开时只显示第一页的数据，在页面底部显示一个链接，连接的默认文字是Load More
//Ext.plugin.ListPaging类定义ListPagingView插件,xtyp值为listpaging，在使用该插件的时候，只需要在List组件中指定plugins配置选项，然后再选项值中添加ListPagingView插件即可。
//autoPage设置为true时,用户每次将list组件滚动到底部,List组件底部将自动添加显示下一页数据。
//另外,在使用该插件时,使用数据仓库的pageSize配置选项来指定每页中显示的条数
//loadMoreText:修改list组件底部连接文字
-----------------------------------------------------------------------------------------------------------------------------------
Model
List2.js
----------------
// JavaScript Document
Ext.define('Oreilly.model.list2',{
extend:'Ext.data.Model',
config:{
fields:[
'iamge_url','book_name','author','description'
]
}
});
----------------------------------------------------------------------------------------------------------------------
Store
list2.js
// JavaScript Document
Ext.define('Oreilly.store.list2',{
extend:'Ext.data.Store',
config:{
model:'Oreilly.model.list2',
autoLoad:true,
pageSize:3,
proxy:{
type:'ajax',
url:'../../sisley/data/list2.txt',
reader:{
type:'json',
rootProperty:'data'
}
}
}
});
--------------------------------------------------------------------------------------------
Data数据
list2.txt
{
"data":[
{
"iamge_url":"../sisley/resources/images/sencha.png",
"book_name":"第一本书",
"author":"第一作者",
"description":"一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一"},
{
"iamge_url":"../sisley/resources/images/phone1.png",
"book_name":"第二本书",
"author":"第二作者",
"description":"二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二"
},
{
"iamge_url":"../sisley/resources/images/sencha.png",
"book_name":"第三本书",
"author":"第三作者",
"description":"三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三"
},
{
"iamge_url":"../sisley/resources/images/phone1.png",
"book_name":"第四本书",
"author":"第四作者",
"description":"四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四"
},
{
"iamge_url":"../sisley/resources/images/sencha.png",
"book_name":"第五本书",
"author":"第五作者",
"description":"五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五五"
}
]
}
----------------------------------------------------------------------------------------------------------------------
app.js
var bookTemplate=new Ext.XTemplate(
'<tpl for=".">',
'<div><img src="{iamge_url}"/></div>',
'<div>',
'<h2>{book_name}</h2><br><h3>作者:{author}</h3>',
'<p>{description:ellipsis(40)}</p>',
'</div>',
'</tpl>'
);
var list2=Ext.create('Ext.List',{
store:'list2',
itemTpl:bookTemplate,
plugins:{
xclass:'Ext.plugin.ListPaging',
autoPaging:true,//设置为true时,用户每次将list组件滚动到底部,List组件底部将自动添加显示下一页数据。
loadMoreText:'下一页'//修改list组件底部连接文字
},
emptyText:'没有数据'
});
Ext.Viewport.add(list2);
