Neeke » ajax

网站缩略图插件

Neeke — Sat, 19 Dec 2009 04:14:19 +0000

效果：当鼠标指向一个链接，鼠标右下方会显示该网页截图。在留言功能上尤其好用，当鼠标停在名字上，就可预览到留言者的网页缩略图，唯一不好的就是只显示目标网站的首页。
ShrinkTheWeb是一个相当实用的服务，它能够在短短的几秒钟内，透过您所输入的网址请求，产生该网站或网页的缩图。你可以方便地使用这些网站截图来作为撰写文章或推荐网站，分享给朋友时使用，无须下载任何程式。注册后，您可透过该帐号取得外部连结网站缩图的权限，也就是能够直接连结ShrinkTheWeb的任何缩图，这也就表示你无须每次更新缩图，都能取得该网站的最新缩图。
官方网站：http://www.shrinktheweb.com/
这个效果是我无意中从willin的博客中看到的，于是研究了下他的网页，于是乎发现了这个。其实ShrinkTheWeb是有提供WordPress插件的，去注册个账号得到Access Key和Secret Key然后后台启用这个插件就可以了，不过用这个插件打开的窗口里面有官方的宣传链接，也不是很好看，而willin的博客中却没有这个广告，于是继续看他的页面，发现只是简单的引入了一个JS而已，
是从客户端Cookie中读取的Access Key和Secret Key，又看了看官方提供的WordPress插件，发现这个Secret Key貌似并没有什么用处，于是把他的JS改了下，我把Access Key写死在里面。

jQuery( document ).ready( function($) {
	plg_url = 'http://www.ineeke.com/wp-content/plugins/stw';
	set_url = 'http://www.ineeke.com';
	stw_key = '你的Access Key';
        // 对哪些链接启用此功能，这里的参数需要自己手工改，因为每个人的博客主题不一样。
	$('.commentlist a').mouseover( function() { 
		if ( !stw || $(this).hasClass('more-link') || $(this).parents().hasClass('postmetadata') ) return false; 
		//自己加的，因为不是每一个a标签都会有href属性
		if(!$(this).attr( 'href' )){
			return false;
		}
		trg_url = $(this).attr( 'href' ).toLowerCase().replace( 'www.', '' );
		stw_url = 'http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=' + stw_key + '&stwsize=lg&stwUrl=' + trg_url;
		$('#footer').after( '+ plg_url + '/bg.png);z-index:9999;">
		 + stw_url + '" onerror=\'this.src="'
		 + stw_url + '";\' style="width:200px;height:150px;margin:25px 0 0 24px;border:3px solid #fff;" />
' );
		if ( !$.browser.msie ) { $('#webshot').css({ opacity: 0.8 }).fadeIn( 500 ) } else { $('#webshot').show() }
		}).mousemove( function(e) { $('#webshot').css( { left: e.pageX + 15, top: e.pageY + 15 } )
		}).mouseout( function() { if ( !$.browser.msie ) { $('#webshot').fadeOut( 800, function() { $(this).remove() } ) } else { $('#webshot').remove() }
		})
});

其中plg_url，set_url，stw_key改成自己的就行了，背景图片http://www.ineeke.com/wp-content/plugins/stw/bg.png，说是个插件，其实就是个JS。

ExtJS将GridPanel放入TabPanel中

Neeke — Mon, 23 Feb 2009 11:29:31 +0000

完整的GridPanel也有了，我现在需要将它组装到后台管理中去。现在要求点击一下左边Tree中的“人员信息”节点，右边的TabPanel就显示出与之对应的GridPanel。最简单的方法就是在TabPanel的html属性（应该可以这么叫吧）中使用iframe来打开另一个用于显示GridPanel的页面，相关代码如下：

var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //通过html载入目标页
html:''
});
}
tab.setActiveTab(n);
}
}
});

这种做法虽然很简单，但是又带来两个问题：
1.页面会刷新
2.UserListGridPanel.jsp页面中也必须加载庞大的ExtJS库
当然也有办法解决了，可以使用autoLoad来解决。修改上面的代码：

var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //自动载入UserListGridPanel.jsp页面，该页面含有JavaScript，不缓存
autoLoad:{url:'UserListGridPanel.jsp',scripts:true,nocache:true}
});
}
tab.setActiveTab(n);
}
}
});

用了之后我又头大了，正常的话应该是如图下图所示。

可现在得到的却是下面这种结果。

想来想去，改来改去，最后我猜想应该是渲染的时候出问题了，上面两种方式中UserListGridPanel的renderTo属性一直都是Ext.getBody()，可是显示结果却不一样，也就是说两种情况下的Ext.getBody()不是同一个对象（OOP习惯了，什么都是对象O(∩_∩)O哈哈~）。第一种方式中Ext.getBody()指的就UserListGridPanel.jsp，而第二种方式中Ext.getBody()指的则是main.jsp。
于是试着在UserListGridPanel.jsp中创建一个id为“UserListGridPanel”的div，然后修改rederTo属性为Ext.get(‘UserListGridPanel’)，看来猜的没错，这样改确实可以。可是页面又变成下面这样了：

我快抓狂了…
再次把JS翻来覆去的改了N遍，得到的结果还是那样…
可是单独运行UserListGridPanel.jsp却是正常的啊！突然想到了点什么，上面不是说用autoLoad时，被载入的页面中可以不用再载入ExtJS库吗？而我现在的UserListGridPanel.jsp中还载入了ExtJS库，会不会和main.jsp中的发生冲突了？
结果当然不言而喻了。

Ext GridPanel数据分页服务器数据交互

Neeke — Sat, 21 Feb 2009 15:20:55 +0000

昨天的GridPanel虽说较为完整了，不过却缺少了数据分页功能。今天又对其再次改进，使其可以进行数据分页。改动不是很大，只是对UserListGridPanel的数据源进行了修改并增加了分页条。

UserListGridPanel = Ext.extend(Ext.grid.GridPanel,{
//初始化数据添加组件和数据修改组件
insertWin:new InsertUserInfoWindow(),
updateWin:new UpdateUserInfoWindow(),
constructor:function(){
//数据源
this['store'] = new Ext.data.Store({
url:UserListGridPanel.ACT_URL,
reader:new Ext.data.JsonReader({
root:'rows',
totalProperty:'count'
},
Ext.data.Record.create([
'UId','UName','UTrueName','UPassword'
]))
}),
UserListGridPanel.superclass.constructor.call(this,{
//将该列表渲染到网页的body中
renderTo:Ext.getBody(),
autoHeight:true,
bbar:new Ext.PagingToolbar({
pageSize:10,//每页数据大小
store:this.store
}),
width:300,
tbar:[{
text:'添加人员',
handler:function(){
this.insertWin.show();
},
scope:this
},'-',{
text:'修改人员',
handler:function(){
this.updateWin.show();
try{
this.updateWin.load(this.getSelected());
}catch(err){
Ext.Msg.alert('系统提示',err.description);
this.updateWin.close();
}
},
scope:this
},'-',{
text:'删除人员',
handler:function(){
Ext.Msg.confirm('警告','删除是不可逆的，是否确定删除？',function(btn){
if(btn == 'yes'){
this.remove();
}
},this);
},
scope:this
}],
//列模式
colModel:new Ext.grid.ColumnModel([{
align:'center',
header:'用户名',
dataIndex:'UName',
menuDisabled:true
},{
align:'center',
header:'真实姓名',
dataIndex:'UTrueName',
menuDisabled:true
},{
align:'center',
header:'密码',
dataIndex:'UPassword',
menuDisabled:true
}]),
loadMask:{msg:'数据加载中...'},
//选择模式
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,//只可单选
listeners:{
'rowselect':{
fn:function(sel,index,r){
this.fireEvent('rowselect',r);
},
scope:this
}
}
})
});
//数据加载事件，向服务器递交查询参数，这里每次查询10条数据
this.getStore().load({params:{start:0,limit:10}});
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
this.addEvents('rowselect');
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)
throw Error('您尚未选中任何人员记录！');
return sm.getSelected();
},
insert:function(r){
this.getStore().add(r);
},
update:function(r){
//更改本地数据
var sr = this.getSelected();
for(var i in sr.data){
sr.set(i,r.get(i));
}
//提交更改
sr.commit();
},
//使用AJAX方式删除数据库及数据列表中的选中数据
remove:function(){
try{
var rc = this.getSelected();
Ext.Ajax.request({
url:'user.do?action=delUser',
params:rc.data
});
this.getStore().remove(rc);
}catch(err){
Ext.Msg.alert('警告',err.description);
}
},
onInsertWinSubmit:function(win,r){
//向列表中插入新数据
this.insert(r);
},
onUpdateWinSubmit:function(win,r){
//修改列表中选中的数据
this.update(r);
}
});

Ext GridPanel 数据库增删改查完整版

Neeke — Fri, 20 Feb 2009 14:26:41 +0000

O(∩_∩)O哈哈~终于搞定了，昨天的那些错误也不知道什么原因，后面写着写着就又好了。而且昨天那个仅仅只是读取了数据库的数据，今天这个加上了对数据库的增删改，目前尚未发现任何BUG，加上了不是很详细的注释O(∩_∩)O~，现在这个算是最终的完整版了，今后要实现其他的功能就只需要照着这个来扩充了。

/*********************基础表单，作为新增、修改表单的父类*****************************/
UserInfoFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(cfg){
//将子类所传递的属性参数应用于父类
if(cfg != null){
Ext.apply(this,cfg);
}
UserInfoFormPanel.superclass.constructor.call(this,{
frame:true,//边框样式
autoHeight:true,//自适应高度
baseCls:'x-plain',//底色与父窗体相同
defaultType:'textfield',//默认类型为文本框
defaults:{allowBlank:false},//默认不允许任何栏位为空
labelWidth:55,//标签宽度
items:[{
inputType:'hidden',
name:'UId',
allowBlank:true
},{
fieldLabel:'用户名',
blankText:'用户名不能为空！',
name:'UName'
},{
fieldLabel:'真实姓名',
blankText:'真实姓名不能为空！',
name:'UTrueName'
},{
fieldLabel:'密码',
inputType:'password',
blankText:'密码不能为空！',
name:'UPassword'
}]
});
this.addEvents('submit');//声明事件
},
//具体事件操作
submit:function(){
if(this.url != ""){
if(this.getForm().isValid()){
//若表单栏位验证通过，则进行提交
this.getForm().submit({
url:this.url,
success:this.onSubmit,//若服务器返回提交成功提示，则调用onSubmit方法
waitTitle:'数据提交',
waitMsg:'数据提交中，请稍候...',
scope:this
});
}else{
Ext.Msg.alert('提示','表单验证失败！');
}
}
},
//获取表单数据方法
getValues:function(){
if(this.getForm().isValid()){
return new Ext.data.Record(this.getForm().getValues());
}else{
throw Error('表单验证失败！');
}
},
//表单数据载入方法
setValues:function(r){
this.getForm().loadRecord(r);
},
//表单重置方法
reset:function(){
this.getForm().reset();
},
//触发声明的事件并传递相关参数
onSubmit:function(form,action){
this.fireEvent('submit',this,action,this.getValues());
}
});
/********************将表单置于窗口中***********************/
UserInfoWindow = Ext.extend(Ext.Window,{
form:null,
url:'',
constructor:function(cfg){
Ext.apply(this,cfg);
//带参构造
this.form = new UserInfoFormPanel({url:this.url});
UserInfoWindow.superclass.constructor.call(this,{
plain:true,
autoHeight:true,
width:250,
items:this.form,
buttonAlign:'center',
closeAction:'hide',
modal:true,
buttons:[{
text:'确定',
handler:this.onSubmitClick,
scope:this
},{
text:'取消',
handler:this.onCancelClick,
scope:this
}]
});
//声明事件
this.addEvents('submit');
//当触发submit事件后执行onSubmit
this.form.on('submit',this.onSubmit,this);
},
//窗口关闭
close:function(){
this.form.reset();
this.hide();
},
//提交表单
onSubmitClick:function(){
this.form.submit();
},
//取消操作
onCancelClick:function(){
this.close();
},
//触发submit事件并传递相关参数
onSubmit:function(form,action,values){
try{
this.fireEvent('submit',this,values);
}catch(err){
return;
}
this.close();
}
});
/*********************数据添加窗口*************************/
InsertUserInfoWindow = Ext.extend(UserInfoWindow,{
//窗口标题
title:'添加人员',
url:'user.do?action=addUser',
//重写父类的onSubmit方法，用于将新增数据的id与该数据作为一条记录添加进GridPanel。
onSubmit:function(form,action,values){
var data = values.data;
Ext.apply(data,{id:action.result.id});
try{
this.fireEvent('submit',this,new Ext.data.Record(data));
}catch(err){
Ext.Msg.alert('提示',err.description);
return;
}
this.close();
}
});
/*********************数据修改窗口**********************/
UpdateUserInfoWindow = Ext.extend(UserInfoWindow,{
title:'修改人员',
url:'user.do?action=updateUser',
//载入GridPanel中选中的数据
load:function(r){
this.form.setValues(r);
}
});
/********************用于显示数据列表*************************/
UserListGridPanel = Ext.extend(Ext.grid.GridPanel,{
//初始化数据添加组件和数据修改组件
insertWin:new InsertUserInfoWindow(),
updateWin:new UpdateUserInfoWindow(),
constructor:function(){
UserListGridPanel.superclass.constructor.call(this,{
//将该列表渲染到网页的body中
renderTo:Ext.getBody(),
autoHeight:true,
width:300,
tbar:[{
text:'添加人员',
handler:function(){
this.insertWin.show();
},
scope:this
},'-',{
text:'修改人员',
handler:function(){
this.updateWin.show();
try{
this.updateWin.load(this.getSelected());
}catch(err){
Ext.Msg.alert('系统提示',err.description);
this.updateWin.close();
}
},
scope:this
},'-',{
text:'删除人员',
handler:function(){
Ext.Msg.confirm('警告','删除是不可逆的，是否确定删除？',function(btn){
if(btn == 'yes'){
this.remove();
}
},this);
},
scope:this
}],
//列模式
colModel:new Ext.grid.ColumnModel([{
align:'center',
header:'用户名',
dataIndex:'UName',
menuDisabled:true
},{
align:'center',
header:'真实姓名',
dataIndex:'UTrueName',
menuDisabled:true
},{
align:'center',
header:'密码',
dataIndex:'UPassword',
menuDisabled:true
}]),
//数据源，此处使用的是Json数据源
store:new Ext.data.JsonStore({
autoLoad:true,
proxy:new Ext.data.HttpProxy({//使用代理获取服务器上的数据
url:UserListGridPanel.ACT_URL
}),
fields:['UId','UName','UTrueName','UPassword']
}),
loadMask:{msg:'数据加载中...'},
//选择模式
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,//只可单选
listeners:{
'rowselect':{
fn:function(sel,index,r){
this.fireEvent('rowselect',r);
},
scope:this
}
}
})
});
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
this.addEvents('rowselect');
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)
throw Error('您尚未选中任何人员记录！');
return sm.getSelected();
},
insert:function(r){
this.getStore().add(r);
},
update:function(r){
//更改本地数据
var sr = this.getSelected();
for(var i in sr.data){
sr.set(i,r.get(i));
}
//提交更改
sr.commit();
},
//使用AJAX方式删除数据库及数据列表中的选中数据
remove:function(){
try{
var rc = this.getSelected();
Ext.Ajax.request({
url:'user.do?action=delUser',
params:rc.data
});
this.getStore().remove(rc);
}catch(err){
Ext.Msg.alert('警告',err.description);
}
},
onInsertWinSubmit:function(win,r){
//向列表中插入新数据
this.insert(r);
},
onUpdateWinSubmit:function(win,r){
//修改列表中选中的数据
this.update(r);
}
});
//将与服务器交互的URL提取出来，方便后期维护
UserListGridPanel.ACT_URL ='user.do?action=getList';

通过写这个，我发现写JS真的是要非常非常的细心啊，由于没有相关的开发工具，写的时候也没什么提示，经常会因为一个逗号，分号，字母顺序啦什么的这些搞砸了。写的时候就一定要注意，否则写完后发现没法运行，这类问题很难查出来。

Ext GridPanel实例代码

Neeke — Thu, 19 Feb 2009 15:20:01 +0000

一段Ext中的GridPanel组件的实例代码。目前只有数据的读取（通过访问user.do?action=getlist），而数据的增加、修改及删除等操作都是本地的，没有对数据库进行操作。目前还有一点点小BUG，表单虽然使用了allowBlan:false，但是当点确定提交时还是会被提交。具体原因目前还没找出来，下来再慢慢找吧。

UserInfoFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
UserInfoFormPanel.superclass.constructor.call(this,{
frame:true,
autoHeight:true,
baseCls:'x-plain',
defaultType:'textfield',
defaults:{allowBlank:false},
labelWidth:55,
items:[{
fieldLabel:'用户名',
blankText:'用户名不能为空！',
name:'UName'
},{
fieldLabel:'真实姓名',
blankText:'真实姓名不能为空！',
name:'UTrueName'
},{
fieldLabel:'密码',
blankText:'密码不能为空！',
name:'UPassword'
}]
});
},
getValues:function(){
return new Ext.data.Record(this.getForm().getValues());
},
setValues:function(r){
this.getForm().loadRecord(r);
},
reset:function(){
this.getForm().reset();
}
});
/****************************************************************************/
UserInfoWindow = Ext.extend(Ext.Window,{
form:null,
constructor:function(){
this.form = new UserInfoFormPanel();
UserInfoWindow.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
plain:true,
autoHeight:true,
width:250,
items:this.form,
buttonAlign:'center',
closeAction:'hide',
modal:true,
buttons:[{
text:'确定',
handler:this.onSubmitClick,
scope:this
},{
text:'取消',
handler:this.onCancelClick,
scope:this
}]
});
this.addEvents('submit');
},
close:function(){
this.form.reset();
this.hide();
},
onSubmitClick:function(){
this.fireEvent('submit',this,this.form.getValues());
this.close();
},
onCancelClick:function(){
this.close();
}
});
/****************************************************************************/
InsertUserInfoWindow = Ext.extend(UserInfoWindow,{
title:'添加人员'
});
/****************************************************************************/
UpdateUserInfoWindow = Ext.extend(UserInfoWindow,{
title:'修改人员',
load:function(r){
this.form.setValues(r);
}
});
/****************************************************************************/
UserListGridPanel = Ext.extend(Ext.grid.GridPanel,{
insertWin:new InsertUserInfoWindow(),
updateWin:new UpdateUserInfoWindow(),
constructor:function(){
UserListGridPanel.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
width:300,
autoHeight:true,
autoWidth:true,
tbar:[{
text:'添加人员',
handler:function(){
this.insertWin.show();
},
scope:this
},'-',{
text:'修改人员',
handler:function(){
this.updateWin.show();
try{
this.updateWin.load(this.getSelected());
}catch(err){
Ext.Msg.alert('系统提示',err.description);
this.updateWin.close();
}
},
scope:this
},'-',{
text:'删除人员',
handler:function(){
Ext.Msg.confirm('警告','删除是不可逆的，是否确定删除？',function(btn){
if(btn == 'yes'){
this.remove();
}
},this);
},
scope:this
}],
//列模式
colModel:new Ext.grid.ColumnModel([{
align:'center',
header:'用户名',
dataIndex:'UName',
menuDisabled:true
},{
align:'center',
header:'真实姓名',
dataIndex:'UTrueName',
menuDisabled:true
},{
align:'center',
header:'密码',
dataIndex:'UPassword',
menuDisabled:true
}]),
//数据源，此处使用的是Json数据源
store:new Ext.data.JsonStore({
autoLoad:true,
proxy:new Ext.data.HttpProxy({//使用代理获取服务器上的数据
url:UserListGridPanel.DATA_URL
}),
fields:['UId','UName','UTrueName','UPassword']
}),
//选择模式
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,//只可单选
listeners:{
'rowselect':{
fn:function(sel,index,r){
this.fireEvent('rowselect',r);
},
scope:this
}
}
})
});
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
this.addEvents('rowselect');
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)
throw Error('您尚未选中任何人员记录！');
return sm.getSelected();
},
insert:function(r){
this.getStore().add(r);
},
update:function(r){
var sr = this.getSelected();
for(var i in sr.data){
sr.set(i,r.get(i));
}
sr.commit();
},
remove:function(){
try{
this.getStore().remove(this.getSelected());
}catch(err){
Ext.Msg.alert('警告',err.description);
}
},
onInsertWinSubmit:function(win,r){
this.getStore().add(r);
},
onUpdateWinSubmit:function(win,r){
this.update(r);
}
});
UserListGridPanel.DATA_URL ='user.do?action=getList';

昨天在用MyEclipse写东西的时候突然停电了，半小时后来电了，打开电脑，写了一天的代码全没了，代码文件的大小都没变，但是打开之后有的全显示“0”，有的则一片空白，差点没哭出来…~~~~(>_<)~~~~

您可能也喜欢：
ajax实现搜索	打造第一个超简单ajax示例	ajax学习3之获取XML文档信息	jQuery EasyUI	三步教你学会ajax
无觅

您可能也喜欢：
ExtJS GridPanel动态列	ExtJS Google Map API	最近在写ExtJS时遇到的一些问题	ExtJS desktop	Ext TabPanel items高度宽度自适应
无觅

您可能也喜欢：
ExtJS GridPanel动态列	ExtJS将GridPanel放入TabPanel中	ExtJS desktop	Ext TabPanel items高度宽度自适应	Ext DataView分页+过滤+查询+拖拽
无觅

您可能也喜欢：
ExtJS将GridPanel放入TabPanel中	ExtJS GridPanel动态列	Ext GridPanel数据分页服务器数据交互	ExtJS desktop	ExtJS Google Map API
无觅