Extjs4中导入自己写的JS显示不正常而直接写在jsp页面又正常

GotoDo 2013-08-15 10:59:34
我是初学者,刚接触js,如题所示,将代码直接写在jsp页面中能正常显示但是我想把js写在专门的文件中,然后引入到页面中,但是就显示不正常了,求大神们指导,代码如下:
Ext.onReady(function(){
//创建数据表格
var datas = [
['张三','男',true,new Date(1988,02,12),2500],
['李四','男',false,new Date(1989,03,22),3500],
['小红','女',false,new Date(1989,03,22),3500],
['李四','男',false,new Date(1989,03,22),3500],
['李四','男',false,new Date(1989,03,22),3500],
['小花','女',false,new Date(1989,03,22),3500],
['李四','男',false,new Date(1989,03,22),3500],
['小萌','女',false,new Date(1989,03,22),3500],
['李四','男',false,new Date(1989,03,22),3500],
['小敏','男',true,new Date(1989,12,12),2500]
];

//创建Grid表格组件
Ext.create('Ext.grid.Panel',{
title : 'Grid示例',
renderTo : Ext.getBody(),
width : 600,
hegiht : 350,
frame : true,
viewConfig:{
forceFit : true,
stripeRows : true //在表格中显示斑马线
},
store : { //配置数据源
fields : ['name','sex','leader','birthday','salary'], //定义字段
groupField : 'sex',//设置分组字段
proxy : {
type : 'memory', //Ext.Date.proxy.Memory内存代理
data : datas, //读取内嵌数据
reader : 'array' //Ext.data.reader.Array解析器
},
autoLoad : true //自动加载
},
plugins:[Ext.create('Ext.grid.plugin.CellEditing',{
clicksToEdit : 2//设置鼠标单击一次进入编辑状态
})
],
setType : 'cellmodel',//设置为单元格选择模式
features:[Ext.create('Ext.grid.feature.Grouping',{
groupByText : '用本字段分组',
showGroupsText : '显示分组',
groupMeaderTp1 : '性别:{name} ({rows.length})',//分组标题模板
startCollapsed : true //设置初始分组是否收起
}),
{
ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
}],
columns : [ //配置表格列
{header : "行号" ,width : 35,
xtype: 'rownumberer' //Ext.grid.column.RowNumberer
},
{header : "姓名" ,width : 80,dataIndex :'name',flex: 1,
summaryType:'count',//求数量
summaryRenderer:function(value){
return '员工总数:'+value
},
editor:{//文本字段
xtype:'textfield',
allowBlank:false //不允许字段为空
}
},
{header : "性别" ,width : 80,dataIndex :'sex',renderer:formatSex},
{header : "组长" ,width : 80,dataIndex :'leader',
xtype : 'booleancolumn',//Ext.grid.column.Boolean布尔列
trueText : '是',
falseText : '否'
},
{header : "生日" ,width : 120,dataIndex :'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日' ,//日期格式化字符串
editor:{//日期字段
xtype : 'datefield',
allowBlank:false
}
},
{header : "薪水" ,width : 120,dataIndex :'salary',flex : 1,
xtype : 'numbercolumn',//Ext.grid.column.Number数字列
format : '0,000', //数字格式化字符串
summaryType : 'average',//求平均值
summaryRenderer : function(value){
return '平均工资:'+ value
},
editor:{//数字字段
xtype : 'numberfield',
allowBlank:false
}
},
{header : "操作" ,width : 80,
xtype : 'actioncolumn',//Ext.grid.column.Action动作列
items : [{
icon : 'images/edt.gif',//指定编辑的图标资源的路径
handler : function(grid,rowIndex,colIndex){
//获取被操作的数据记录
var rec = grid.getStore().getAt(rowIndex);
alert("编辑 "+rec.get('name'));
}
},
{
icon : 'images/del.gif',//指定编辑的图标资源的路径
handler : function(grid,rowIndex,colIndex){
//获取被操作的数据记录
var rec = grid.getStore().getAt(rowIndex);
alert("删除"+rec.get('name'));
}
},
{
icon : 'images/add.gif',//指定编辑的图标资源的路径
handler : function(grid,rowIndex,colIndex){
//获取被操作的数据记录
var rec = grid.getStore().getAt(rowIndex);
alert("保存 "+rec.get('name'));
}
}]
}
]
});
//定义渲染函数,格式化性别显示
function formatSex(value){
return value=='男'?'男':'<font color=red>女</font>';
}
});
...全文
188 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
GotoDo 2013-08-15
  • 打赏
  • 举报
回复
引用 3 楼 showbo 的回复:
那可能是编码的问题,导致js脚本出错。将js存储为utf-8编码,并执行script的charset。 <script type="text/javascript" src="js/grid.js" charset="utf-8"></script> 还要确认你的js文件路径是不是对了
路径肯定没有问题,我换了编码格式,还是不行。换其他的JS文件能够执行
  • 打赏
  • 举报
回复
那可能是编码的问题,导致js脚本出错。将js存储为utf-8编码,并执行script的charset。 <script type="text/javascript" src="js/grid.js" charset="utf-8"></script> 还要确认你的js文件路径是不是对了
GotoDo 2013-08-15
  • 打赏
  • 举报
回复
引用 1 楼 showbo 的回复:
你的这个js要放到导入ext-all.js的script标签后面,不要放到前面
可是我就是放在后面的啊
<link rel="stylesheet" type="text/css"
			href="extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="extjs/ext-all.js"></script>
		<script type="text/javascript" src="js/grid.js"></script>
  • 打赏
  • 举报
回复
你的这个js要放到导入ext-all.js的script标签后面,不要放到前面
GotoDo 2013-08-15
  • 打赏
  • 举报
回复
引用 5 楼 showbo 的回复:
自己用chrome开发工具或者firebug看什么错误 肯定是路径不对或者出乱码
路径没问题,可能是乱码的问题,刚开始改了不行,但是刚刚试了一下突然就可以了。谢谢了
  • 打赏
  • 举报
回复
自己用chrome开发工具或者firebug看什么错误 肯定是路径不对或者出乱码

52,792

社区成员

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

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