Ext.grid.ColumnModel 显示不正常 求救!

java初学者好吧 2009-02-19 04:11:03
如图:

源代码为修改的http://extjs.org.cn/extjs/examples/grid/paging.html的代码:

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

Ext.onReady(function(){

// create the Data Store
var store = new Ext.data.Store({
// 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: '../action.php?action=getLogs'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'threadid',
fields: [
'id', 'module', 'description',
{name: 'time', mapping: 'time', type: 'date', dateFormat: 'timestamp'}
]
}),

// turn on remote sorting
remoteSort: true
});
store.setDefaultSort('id', '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 renderTime(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['time']);
}

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: 'id', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "序号",
dataIndex: 'id',
width: 70
},{
header: "模块",
dataIndex: 'module',
width: 150
},{
header: "内容",
align : 'center',
sortable : false,
dataIndex: 'description',
width: 700,
align: 'right'
},{
id: 'time',
header: "日期",
dataIndex: 'time',
width: 120,
renderer: renderTime
}]);

// by default columns are sortable
cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:1050,
height:640,
title:'',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
//loadMask: true,
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';
}
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
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: toggleDetails
}]
})
});

// render it
grid.render();

// trigger the data store load
store.load({params:{start:0, limit:25}});

function toggleDetails(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
setTimeout(function() {
Ext.get('loading-mask').fadeOut({
remove : true
});
}, 300);
loadend();
});
</script>
...全文
709 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
朱帝11 2012-03-02
  • 打赏
  • 举报
回复
仔细看看标点符号吧
EXT核心API详解 1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 6、Function类 ………………………… 6 7、Ext.Element类 ………………………… 7 8、Ext.DomQuery类 ………………… 13 9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、Ext.CompositeElementLite类 ……… 16 15、Ext.Fx类 …………………………… 16 16、Ext.KeyNav类 ……………………… 19 17、Ext.KeyMap类 …………………… 19 18、Ext.util.JSON类 ……………………… 20 19、Ext.util.Format类 ………………… 20 20、Ext.util.DelayedTask类 ……………… 20 21、Ext.util.TaskRunner类 …………… 21 22、Ext.util.TextMetrics类 …………… 21 23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、Ext.data.ScriptTagProxy类 ………… 25 31、Ext.data.DataReader类 ……………26 32、Ext.data.ArrayReader类 …………… 26 33、Ext.data.JsonReader类 …………… 26 34、Ext.data.XmlReader类 …………… 27 35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 40、Ext.Action类 ……………………… 35 41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、Ext.form.TriggerField类 ……… 45 53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext.menu.Adapter类 ……………… 51 59、Ext.menu.Item类 ………………… 51 60、Ext.menu.CheckItem类 …………… 51 61、Ext.menu.Separator类 ………… 52 62、Ext.menu.TextItem类 …………… 52 63、Ext.Toolbar类 …………………… 55 64、Ext.Toolbar.Item类 ……………… 56 65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65 1、Ext类 addBehaviors(Object obj) : void 对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ // id=foo下所有的a标签加入click事件 '#foo a@click' : function(e, t){ // do something }, // 用,分隔多个选择器 '#foo a, #bar span.some-class@mouseover' : function(){ // do something } }); apply( Object obj, Object config, Object defaults ) : Object 从config拷贝所有的属性到obj,如果有defaults参数,也将拷贝其属性到obj applyIf( Object obj, Object config ) : Object 从config拷贝所有属性至obj(如果obj未定义相应属性) decode(Object obj) : String 编码一个对象/数组或其它值为一个json格式字符串(支持对象,数组,日期,字符串) destroy( Mixed arg1, Mixed (optiona
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 6、Function类 ………………………… 6 7、Ext.Element类 ………………………… 7 8、Ext.DomQuery类 ………………… 13 9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、Ext.CompositeElementLite类 ……… 16 15、Ext.Fx类 …………………………… 16 16、Ext.KeyNav类 ……………………… 19 17、Ext.KeyMap类 …………………… 19 18、Ext.util.JSON类 ……………………… 20 19、Ext.util.Format类 ………………… 20 20、Ext.util.DelayedTask类 ……………… 20 21、Ext.util.TaskRunner类 …………… 21 22、Ext.util.TextMetrics类 …………… 21 23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28、Ext.data.HttpProxy类 …………… 24 29、Ext.data.MemoryProxy类 ……… 25 30、Ext.data.ScriptTagProxy类 ………… 25 31、Ext.data.DataReader类 ……………26 32、Ext.data.ArrayReader类 …………… 26 33、Ext.data.JsonReader类 …………… 26 34、Ext.data.XmlReader类 …………… 27 35、Ext.data.Store类 …………………… 28 36、Ext.data.GroupingStore类 ………… 32 37、Ext.data.SimpleStore类 ………… 34 38、Ext.data.Tree类 …………………… 34 39、Ext.data.Node类 ………………… 34 40、Ext.Action类 ……………………… 35 41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、Ext.form.TriggerField类 ……… 45 53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext.menu.Adapter类 ……………… 51 59、Ext.menu.Item类 ………………… 51 60、Ext.menu.CheckItem类 …………… 51 61、Ext.menu.Separator类 ………… 52 62、Ext.menu.TextItem类 …………… 52 63、Ext.Toolbar类 …………………… 55 64、Ext.Toolbar.Item类 ……………… 56 65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧