Ext菜鸟,一个Grid单元格的ToolTip弹title问题,高手帮忙看下。案例如下:Ext.onReady(function(){
// INIT QUICKTIPS
Ext.QuickTips.init();
var myData = [
['1','2','3','4','5','6','7'],
['8','9','10','11','12','13','14'],
['15','16','17','18','19','20','21'],
['22','23','24','25','26','27','28'],
['29','30','31','','','','']
]; // create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'sunday'},
{name: 'monday'},
{name: 'tuesday'},
{name: 'wednesday'},
{name: 'thursday'},
{name: 'friday'},
{name: 'saturday'}
]
});
store.loadData(myData); // create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
columns: [
{id:'sunday', header: "sunday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'sunday'},
{header: "monday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'monday' , renderer: function (v,p) {
//v : value , p : cell
p.attr = 'ext:qtitle="' + "Detail for Monday " + v + '"';
p.attr += ' ext:qtip=" the detail is... ' + v + '"';
return v;
}
},
{header: "tuesday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'tuesday'},
{header: "wednesday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'wednesday'},
{header: "thursday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'thursday'},
{header: "friday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'friday'},
{header: "saturday", width: 90, height: 90, draggable:false, ortable: false, dataIndex: 'saturday'}
],
stripeRows: true,
disableSelection:true,
draggable:false,
width:632,
frame:true,
title:'Calendar'
});
grid.render('grid-example');
});
My code:Ext.QuickTips.init();
// 创建Grid列表面板
var grid = new Ext.grid.GridPanel({
store: store,
region: 'center',
columns: [
sm,
{id:'birthday',header: "生日", width: 160, sortable: true,renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'birthday'},
{header: "客户姓名", width: 75, sortable: true, dataIndex: 'realname'},
{header: "性别", width: 75, sortable: true, dataIndex: 'sex'},
{header: "手机号码", width: 100, sortable: true, dataIndex: 'mobile'},
{header: "客户类型", width: 100, sortable: true, dataIndex: 'type'},
{header: "持卡类别", width: 120, sortable: true,dataIndex: 'cardtype'},
{header: "最近一次服务老师", width: 110,draggable:false,sortable: true,dataIndex: 'serve',renderer:function(v,p){
//v : value , p : cell
p.attr = 'ext:qtitle="' + "Detail for Monday " + v + '"';
p.attr += ' ext:qtip=" the detail is... ' + v + '"';
return v;
}},//,renderer:excol
{header: "设计咨询表", width: 85, dataIndex: 'counsel'},
{header: "回访记录", width: 85, dataIndex: 'record'},
{header: "操作", width: 85, dataIndex: 'modif'}
],
sm:sm,
disableSelection:true,
stripeRows: true,
border:false,
autoExpandColumn: 'birthday',
height:document.height,
width:document.width,
title:'',
frame:true,
tbar:[{text:'删除所选',id:'tb_delete',handler:function(){DeleteSel();},iconCls: 'btnremove',scope:this},'-',
{text:'新增客户',id:'tb_add',handler:function(){showWindow('新增客户',700,440,'/crm/customerAdd.aspx');},iconCls: 'btnadd',scope:this},'-',
{text:'刷新',handler:function(){
grid.store.removeAll();
grid.store.load();},
iconCls: 'btnrefresh',scope:this
},'-',
{text:'Title测试',id:'tip1',icon:'/theme/default/images/bg55.png',tooltip:'<b>快捷提示</b><br/>带有提示的图片按钮。',scope:this}
],
bbar: new Ext.PagingToolbar({
store: store,
pageSize:25,
displayInfo:true,
displayMsg:'显示 第{0}-{1}条记录/共{2}条记录',
emptyMsg:'没有数据',
listeners:{beforechange:function(){
}
}
}),
loadMask: {msg:'正在加载数据,请稍侯……'}
});
案例测试环境是2.0,“Monday”能够正常的显示title,我的项目是3.0的,可是不能显示title,也不报错!?高手帮忙看下,先谢了。
// INIT QUICKTIPS
Ext.QuickTips.init();
var myData = [
['1','2','3','4','5','6','7'],
['8','9','10','11','12','13','14'],
['15','16','17','18','19','20','21'],
['22','23','24','25','26','27','28'],
['29','30','31','','','','']
]; // create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'sunday'},
{name: 'monday'},
{name: 'tuesday'},
{name: 'wednesday'},
{name: 'thursday'},
{name: 'friday'},
{name: 'saturday'}
]
});
store.loadData(myData); // create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
columns: [
{id:'sunday', header: "sunday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'sunday'},
{header: "monday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'monday' , renderer: function (v,p) {
//v : value , p : cell
p.attr = 'ext:qtitle="' + "Detail for Monday " + v + '"';
p.attr += ' ext:qtip=" the detail is... ' + v + '"';
return v;
}
},
{header: "tuesday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'tuesday'},
{header: "wednesday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'wednesday'},
{header: "thursday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'thursday'},
{header: "friday", width: 90, height: 90, draggable:false, sortable: false, dataIndex: 'friday'},
{header: "saturday", width: 90, height: 90, draggable:false, ortable: false, dataIndex: 'saturday'}
],
stripeRows: true,
disableSelection:true,
draggable:false,
width:632,
frame:true,
title:'Calendar'
});
grid.render('grid-example');
});
My code:Ext.QuickTips.init();
// 创建Grid列表面板
var grid = new Ext.grid.GridPanel({
store: store,
region: 'center',
columns: [
sm,
{id:'birthday',header: "生日", width: 160, sortable: true,renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'birthday'},
{header: "客户姓名", width: 75, sortable: true, dataIndex: 'realname'},
{header: "性别", width: 75, sortable: true, dataIndex: 'sex'},
{header: "手机号码", width: 100, sortable: true, dataIndex: 'mobile'},
{header: "客户类型", width: 100, sortable: true, dataIndex: 'type'},
{header: "持卡类别", width: 120, sortable: true,dataIndex: 'cardtype'},
{header: "最近一次服务老师", width: 110,draggable:false,sortable: true,dataIndex: 'serve',renderer:function(v,p){
//v : value , p : cell
p.attr = 'ext:qtitle="' + "Detail for Monday " + v + '"';
p.attr += ' ext:qtip=" the detail is... ' + v + '"';
return v;
}},//,renderer:excol
{header: "设计咨询表", width: 85, dataIndex: 'counsel'},
{header: "回访记录", width: 85, dataIndex: 'record'},
{header: "操作", width: 85, dataIndex: 'modif'}
],
sm:sm,
disableSelection:true,
stripeRows: true,
border:false,
autoExpandColumn: 'birthday',
height:document.height,
width:document.width,
title:'',
frame:true,
tbar:[{text:'删除所选',id:'tb_delete',handler:function(){DeleteSel();},iconCls: 'btnremove',scope:this},'-',
{text:'新增客户',id:'tb_add',handler:function(){showWindow('新增客户',700,440,'/crm/customerAdd.aspx');},iconCls: 'btnadd',scope:this},'-',
{text:'刷新',handler:function(){
grid.store.removeAll();
grid.store.load();},
iconCls: 'btnrefresh',scope:this
},'-',
{text:'Title测试',id:'tip1',icon:'/theme/default/images/bg55.png',tooltip:'<b>快捷提示</b><br/>带有提示的图片按钮。',scope:this}
],
bbar: new Ext.PagingToolbar({
store: store,
pageSize:25,
displayInfo:true,
displayMsg:'显示 第{0}-{1}条记录/共{2}条记录',
emptyMsg:'没有数据',
listeners:{beforechange:function(){
}
}
}),
loadMask: {msg:'正在加载数据,请稍侯……'}
});
案例测试环境是2.0,“Monday”能够正常的显示title,我的项目是3.0的,可是不能显示title,也不报错!?高手帮忙看下,先谢了。
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货