-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.onReady(function(){
+Ext.Loader.setConfig({enabled: true});
- // create the Data Store
- var store = new Ext.data.JsonStore({
- root: 'topics',
- totalProperty: 'totalCount',
- idProperty: 'threadid',
- remoteSort: true,
+Ext.Loader.setPath('Ext.ux', '../ux/');
+Ext.require([
+ 'Ext.grid.*',
+ 'Ext.data.*',
+ 'Ext.util.*',
+ 'Ext.toolbar.Paging',
+ 'Ext.ux.PreviewPlugin',
+ 'Ext.ModelManager',
+ 'Ext.tip.QuickTipManager'
+]);
+
+
+
+Ext.onReady(function(){
+ Ext.tip.QuickTipManager.init();
+ Ext.define('ForumThread', {
+ extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
- 'lastposter', 'excerpt'
+ 'lastposter', 'excerpt', 'threadid'
],
-
- // load using script tags for cross domain, if the data in on the same domain as
- // this page, an HttpProxy would be better
- proxy: new Ext.data.ScriptTagProxy({
- url: 'http://extjs.com/forum/topics-browse-remote.php'
- })
+ idProperty: 'threadid'
});
- store.setDefaultSort('lastpost', 'desc');
+ // create the Data Store
+ var store = Ext.create('Ext.data.Store', {
+ pageSize: 50,
+ model: 'ForumThread',
+ remoteSort: true,
+ proxy: {
+ // load using script tags for cross domain, if the data in on the same domain as
+ // this page, an HttpProxy would be better
+ type: 'jsonp',
+ url: 'http://www.sencha.com/forum/topics-browse-remote.php',
+ reader: {
+ root: 'topics',
+ totalProperty: 'totalCount'
+ },
+ // sends single sort as multi parameter
+ simpleSortMode: true
+ },
+ sorters: [{
+ property: 'lastpost',
+ direction: 'DESC'
+ }]
+ });
// pluggable renders
- function renderTopic(value, p, record){
- return String.format(
- '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
- value, record.data.forumtitle, record.id, record.data.forumid);
+ function renderTopic(value, p, record) {
+ return Ext.String.format(
+ '<b><a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://sencha.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
+ value,
+ record.data.forumtitle,
+ record.getId(),
+ record.data.forumid
+ );
}
- function renderLast(value, p, r){
- return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
+
+ function renderLast(value, p, r) {
+ return Ext.String.format('{0}<br/>by {1}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.data['lastposter']);
}
- var grid = new Ext.grid.GridPanel({
- width:700,
- height:500,
- title:'ExtJS.com - Browse Forums',
+
+ var pluginExpanded = true;
+ var grid = Ext.create('Ext.grid.Panel', {
+ width: 700,
+ height: 500,
+ title: 'ExtJS.com - Browse Forums',
store: store,
- trackMouseOver:false,
- disableSelection:true,
+ disableSelection: true,
loadMask: true,
-
+ viewConfig: {
+ id: 'gv',
+ trackOver: false,
+ stripeRows: false,
+ plugins: [{
+ ptype: 'preview',
+ bodyField: 'excerpt',
+ expanded: true,
+ pluginId: 'preview'
+ }]
+ },
// grid columns
columns:[{
- id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
- header: "Topic",
+ // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
+ // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
+ // therefore the id will be registered in the ComponentManager and conflict. Need a way to
+ // add additional CSS classes to the rendered cells.
+ id: 'topic',
+ text: "Topic",
dataIndex: 'title',
- width: 420,
+ flex: 1,
renderer: renderTopic,
- sortable: true
+ sortable: false
},{
- header: "Author",
+ text: "Author",
dataIndex: 'author',
width: 100,
hidden: true,
sortable: true
},{
- header: "Replies",
+ text: "Replies",
dataIndex: 'replycount',
width: 70,
align: 'right',
sortable: true
},{
id: 'last',
- header: "Last Post",
+ text: "Last Post",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: true
}],
-
- // customize view config
- viewConfig: {
- forceFit:true,
- enableRowBody:true,
- showPreview:true,
- getRowClass : function(record, rowIndex, p, store){
- if(this.showPreview){
- p.body = '<p>'+record.data.excerpt+'</p>';
- return 'x-grid3-row-expanded';
- }
- return 'x-grid3-row-collapsed';
- }
- },
-
// paging bar on the bottom
- bbar: new Ext.PagingToolbar({
- pageSize: 25,
+ bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
- pressed: true,
- enableToggle:true,
text: 'Show Preview',
- cls: 'x-btn-text-icon details',
- toggleHandler: function(btn, pressed){
- var view = grid.getView();
- view.showPreview = pressed;
- view.refresh();
+ pressed: pluginExpanded,
+ enableToggle: true,
+ toggleHandler: function(btn, pressed) {
+ var preview = Ext.getCmp('gv').getPlugin('preview');
+ preview.toggleExpanded(pressed);
}
}]
- })
+ }),
+ renderTo: 'topic-grid'
});
- // render it
- grid.render('topic-grid');
-
// trigger the data store load
- store.load({params:{start:0, limit:25}});
+ store.loadPage(1);
});
git.ithinksw.org / extjs.git / blobdiff