`
dengddq
  • 浏览: 31999 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

show下用Ext2.0做好的内容管理系统(多种Ext显示风格)

    博客分类：
  • Ext
EXTAjax编程IE浏览器 
阅读更多
内容管理系统功能结构介绍


站点管理:
     站点列表(列表内功能包括:创建页面，创建模板，站点的页面列表，站点模板列表，站点的内容列表)
     页面列表(列表内功能包括:添加模板，删除页面，查询，站点过滤，页面的模板列表，页面的内容列表)
     模板列表(列表内功能包括:查询，站点过滤，修改模板，审核新建模板,模板发布内容)
     新建站点
     新建页面
     新建模板
内容管理:
     内容列表(功能包括:查询过滤,综合查询,审核新建内容,从此版本创建新版本内容,预览内容,删除内容,查看内容 发布历史等)
     新建内容
管理员个人管理:
     修改密码
     新建管理员(包括权限设置)
     管理员列表(功能:修改信息,修改权限,删除)
     退出

     此系统开发时间为3周,现在已经投入使用。Ext的显示风格，我使用了http://www.vifir.com/my.ejf?uid=655413提供的源代码

 

分享到：
| 使用ComboBox扩展Ext分页
评论
24 楼 zhouzhao21 2008-02-27  
1314520ln 写道
其实ext使用非常简单的,只要你了解API就OK了,剩下的就是体力活..

不要动不动就要求共享,只有自己亲自去实现才能提高自己的编程思想和能力.

呵呵,说的好.不过我更喜欢在别人代码上进行重构.
23 楼 1314520ln 2008-02-26  
其实ext使用非常简单的,只要你了解API就OK了,剩下的就是体力活..

不要动不动就要求共享,只有自己亲自去实现才能提高自己的编程思想和能力.
22 楼 doraemon_zwp 2008-02-26  
希望共享源码！
21 楼 1314520ln 2008-02-25  
整个系统速度很慢吧,ext最大的问题了...

我觉的整个系统部分功能用ext去实现就OK了,全部用的话效率问题要评估一下了.
20 楼 goodboy 2008-02-25  
http://wlr.easyjf.com帐号密码没有错误，只是演示地址有了变化，看看主页就知道了
19 楼 penghao122 2008-02-25  
。。。。用户名和密码错误的也发上来。。

做要要厚道
18 楼 zhangyifei 2008-02-25  
登陆用户名和密码：amdin/admin

登录不上
17 楼 yerba 2008-02-25  
为什么不用jpg格式呢？
16 楼 zbird 2008-02-25  
原来EXTJS看久了真的会审美疲劳。
15 楼 doraemon_zwp 2008-02-25  
“http://wlr.easyjf.com/manage.html提供的源代码，登陆用户名和密码：amdin/admin 源代码是开源的，大家可以去下载来使用。 ”
用这个用户名和密码登录不上去啊！！能否把你的例子的源码打成包发布一下，多谢多谢！
14 楼 fight_bird 2008-02-24  
不错，怪不得Ext如此火！
13 楼 goodboy 2008-02-24  
LZ能否提供一下一个演示，谢谢
12 楼 liping 2008-02-23  
谢谢你奉献的源码！
11 楼 dengddq 2008-02-23  
应该是record.data.Id的问题,改为record.id,记得Id要改为小写。
下面的源代码可以参考一下 
var Page={
	
	/**
	*分页查询页列表
	*@param siteId:所属站点ID
	**/
	store:'',//存储器
	
	queryPage:function(siteId){
		var sites=[];
		new Ajax({//查询站点列表
			url:'/viewSites.do',
			sync:false,
			success:function(ajax){//返回成功
				var responseArray =ajax.getJosnObject();
				if(responseArray.success==true){  
					sites = responseArray.data;	
					var temp=new Array();
					temp.push([-1,'所有站点']);
					var l=sites.length;			
					for(var i=0;i<l;i++){
						temp.push(sites.pop());
					}			 
					sites=temp;
	            }  
			}
		});
		var url;
		if(siteId!=null&&siteId>0)
			url='/queryPage.do?siteId='+siteId;
		else{
			url='/queryPage.do?';
			siteId='';
		}
	    var store = new Ext.data.Store({
	        proxy: new Ext.data.ScriptTagProxy({
	            url: url
	        }),

	        reader: new Ext.data.JsonReader({
	            root: 'results',
	            totalProperty: 'total',
	            id: 'id',
	            fields: ['name','url','siteName','adminName','createTime','remark','siteId'        
	            ]
	        }),
	            remoteSort: true       
	    });    
	    
	    
	    this.store = store;
	    store.Renderers = {
			operator:function(value, p, record){
				var content=content='<span id="modify-page-show-btn'+record.id+'" style="cursor:pointer;" onclick="Page.modifyPage('+record.id+');"><img  src="/images/b_edit.png" alt="修改页面"></span>';
				content +='&nbsp;&nbsp;<a ext:title="'+record.data.name+'的模板位列表" ext:method="Position.queryPosition(\''+record.id+'\',null)" href="/panelContent.jsp?id=position-list-grid'+record.id+'"><img  src="/images/position.gif" alt="'+record.data.name+'的模板位列表"></a>';
				content +='&nbsp;&nbsp;<a ext:title="'+record.data.name+'的内容列表" ext:method="var condition={pageId:'+record.id+'};AdvertManager.queryAdvertList(condition);" href="/panelContent.jsp?id=content-list-gridpage'+record.id+'"><img  src="/images/advert.gif" alt="'+record.data.name+'的内容列表"></a>';
				content +='&nbsp;&nbsp;<span style="cursor:pointer;" onclick="Page.deletePage('+record.id+');"><img  src="/images/delete.gif" alt="删除页面"></span>';
				return content;
			}
		}
	    var cm = new Ext.grid.ColumnModel([
		     {
	           id: 'topic',
	           header: "页面名称",
	           dataIndex: 'name',
	           width: 80,
	           align: 'left'
	        },{
	           header: "页面地址",
	           dataIndex: 'url',
	           width: 120,
	           align: 'left'           
	        },{
	           header: "站点名称",
	           dataIndex: 'siteName',
	           width: 80,
	           align: 'left'           
	        },{
	           header: "创建者",
	           dataIndex: 'adminName',
	           width: 80,
	           align: 'left'
	        },{
	           header: "创建时间",
	           dataIndex: 'createTime',
	           width: 100,
	           align: 'left'
	        },{
	           header: "页面简介",
	           dataIndex: 'remark',
	           width: 100,
	           align: 'left'
	        },{
			   header: "操作",
	           dataIndex: 'operator',
	           width: 80,
	           align: 'left',
			   renderer: store.Renderers.operator
			}]);
	
	    cm.defaultSortable = true;
	
	    var grid = new Ext.grid.GridPanel({
	        el:'page-list-grid'+siteId,
	        width:850,
	        height:500,
	        store: store,
	        cm: cm,
	        collapsible: true,
	        animCollapse: false,
	        stripeRows: true, 
	        loadMask: true, 
	        enableDragDrop:true,   
	        enableColumnMove:true,
	        viewConfig: {
	            forceFit:true
	        },
	        iconCls: 'icon-grid',
	        bbar: this.pagingToolbar=new Ext.PagingToolbar({
	            pageSize: 14,
	            store: store,
	            displayInfo: true,
	            beforePageText : "第",
				afterPageText : "页共 {0} 页", 
				displayMsg : "显示 {0} - {1}，共 {2} 条",
				emptyMsg : '没有数据需要显示',
				items:[
				   '&nbsp;&nbsp;&nbsp;&nbsp;每页显示数',
				   new Ext.form.ComboBox({
				    store:new Ext.data.SimpleStore({
					    fields: ['abbr', 'state'],
					    data : [[10,10],[15,15],[20,20],[30,30],[40,40],[60,60],[80,80],[100,100]]
					}),
					width:50,
				    displayField:'state',
				    typeAhead: true,
				    mode: 'local',
					value:15,
				    triggerAction: 'all',
				    selectOnFocus:true,
					listeners:{
						change:{
							fn:function(box,newValue,oldValue){
								 Page.changePageSize(newValue);
							}
					    },
						select:{
							fn:function(combo, value){
								 Page.changePageSize(combo.getValue());  
							}
					    }  
					}
				})
				]            
	        }),
			tbar:[
			'查询:', new Ext.form.ComboBox({
	                    listClass:'x-combo-list-small',
	                    width:90,
	                    value:'-1',
						valueField :"value",
						displayField: "state",
			            hiddenName:'userState',
						name: 'userState',
						editable: false,
						emptyText:'所有',
						mode: 'local',					
						triggerAction:'all',
	                    store: new Ext.data.SimpleStore({ 
	                        fields: [ 'value','state'],
							data:sites
	                    }),
						listeners:{select:{fn:function(combo, value) {//过滤操作
							store.proxy.url="/queryPage.do?siteId="+combo.getValue();
							store.reload();
	                   }}}
	                }),'按页面地址',new Ext.form.TriggerField({
				width: 120,
				emptyText:'页面地址',
				id:'url',
				triggerClass:'x-form-search-trigger',
				onTriggerClick:function(){
					var url=Ext.get('url').dom.value;
					if(url!='页面地址'&&url.length>0){
						store.proxy.url='/queryPage.do?url='+encodeURI(url);
						store.reload();
					}else{
						Ext.Msg.alert('查询',"请输入要查询的地址!");
					}
				}
			}),
			'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red;"><b>操作说明:</b></span>',
			'<img  src="/images/b_edit.png" alt="修改页面">修改&nbsp;&nbsp;','<img  src="/images/delete.gif" alt="删除页面">删除&nbsp;&nbsp;','<img  src="/images/position.gif" alt="查看页面的模板位列表">查看模版&nbsp;&nbsp;','<img  src="/images/advert.gif" alt="查看页面的模板位列表">查看内容'
			]
	    });
	    grid.render();
	    grid.getSelectionModel().selectFirstRow();
	
	    store.load({params:{start:0, limit:14}});
	
	    function toggleDetails(btn, pressed){
	        var view = grid.getView();
	        view.showPreview = pressed;
	        view.refresh();
	    }		
	},
	changePageSize:function(pageSize){
      if(pageSize!=null&&pageSize>0)
      this.pagingToolbar.pageSize=parseInt(pageSize);
      this.store.load({params:{start:0, limit:this.pagingToolbar.pageSize}});
	  this.store.reload();
	  },
	/**
	 * 修改页面信息
	 * @author kelvin
	 * @param {Object} record 传入的转换对象id
	 */
	modifyPage:function(id){
		var record=this.store.getById(id);//根据record的id返回record
		var sites=[];
		new Ajax({//查询站点列表
			url:'/viewSites.do',
			sync:false,
			success:function(ajax){//返回成功
				var responseArray =ajax.getJosnObject();
				if(responseArray.success==true){    
					sites=responseArray.data;//设置返回值					 
	            }  
			}
		});
		if(this.lastModifyPageWin!=null){
		    this.lastModifyPageWin.destroy();//删除上一个windows
		}
		var button = Ext.get('modify-page-show-btn'+id);
		var modfiyPageForm = new Ext.FormPanel({
			bodyStyle: 'padding:5px;',
			defaults: {
				width: 300
			},
			defaultType: 'textfield',
			items: [{
				fieldLabel: '页面ID',
				name: 'page.id',
				value: record.id,
				labelSeparator: '：',
				readOnly: true,
				allowBlank: false
			}, {
				fieldLabel: '页面名称',
				name: 'page.name',
				labelSeparator: '：',
				value: record.data.name,
				readOnly: false,
				allowBlank: false
			},{
				fieldLabel: '页面地址',
				name: 'page.url',
				labelSeparator: '：',
				value: record.data.url,
				vtype:'url',//验证类型为URL
				readOnly: false,
				allowBlank: false
			},{
			   xtype:'combo',		   
			   valueField :"value",
			   displayField: "name",
			   hiddenName:'page.siteId',
			   store: new Ext.data.SimpleStore({
			   	fields: [ 'value','name'],data: sites
			   }),
			   mode: 'local',
			   forceSelection: true,
			   allowBlank:false,
			   editable: false,
			   lastQuery:'',
			   triggerAction:'all',
			   fieldLabel: '页面所属站点',
			   //emptyText: "选择页面所属站点"
			   value:record.data.siteId
			},new Ext.form.TextArea({			
				fieldLabel: '页面简介',
				name:'page.remark',
				value: record.data.remark
			})
			],
		
		buttons: [{
			text: '确认修改',
			type:'submit',
            handler: function() {
                if(verifyPageForm.form.isValid()){//验证通过                 
                 verifyPageForm.form.doAction('submit',
                 {
		              url:'modifyPage.do',
		              method:'post',
		              params:'',
					  waitMsg:'正在提交修改信息,请稍等...',
		              success:function(form,action){	
                         Ext.Msg.alert('修改',"成功修改!");
						 win.hide();   	
						 Page.store.reload();
		              },
		              failure:function(form,action){
                          Ext.Msg.alert('修改',"修改失败!");
						  win.hide();   	
						  Page.store.reload();
		              }
                      });

            } else{//
               Ext.Msg.alert('',"请正确填写完整的信息!");	
            }
           }
		}, {
			text: '取消',
			handler: function(){
				win.hide();				
			}
		}]
	});
	var win = new Ext.Window({
		width: 500,
		height: 300,
		title:'修改页面信息'+'('+record.data.name+')',
		closeAction: 'hide',
		plain: true,
		layout: 'fit',
		closable: true,//是否可以关闭
		maximizable: true,//是否可以最大化
		collapsible: true,
		items: [ modifyPageForm ]
	});
	win.show(Ext.get('modify-page-show-btn'+id));//显示Window
	this.lastModifyPageWin=win;
	},
	/**
	 * 删除广告页面
	 * @author kelvin
	 * @param {Object} id 广告页面id
	 */
	deletePage:function(id){
		var back = Ext.MessageBox.confirm('确认','是否真的要删除页面吗',function(btn){
			if(btn=='yes'){
				Ext.Ajax.request({
					url:'deletePage.do',
					params:{
						pageId:id
					},
					success:function(response,options){
						if(response.responseText){
							Ext.Msg.alert('恭喜','此页面成功删除!');
							Page.store.reload();
						}else{
							Ext.Msg.alert('失败','此页面删除失败!');
							Page.store.reload();
						}
					}
				})
			}
		});
	}
};
10 楼 liping 2008-02-23  
dengddq 不是record.data.Id 的问题 是render产生的代码找不到Test函数！
能不能看看你的那个修改的部分代码！
9 楼 gekie 2008-02-23  
能提供整个源参考一下否？
8 楼 stworthy 2008-02-23  
显示风格中VISTA有些问题，提示一些IMAGE的资源没找到。
7 楼 sp42 2008-02-23  
很好， 下次用优化一下图片再上传就更好了。
p.s:截图最能说明何谓“表示层”（斟酌一下了字眼，勿介意:)）
6 楼 dengddq 2008-02-23  
提供多种显示风格给大家，下载附件解压后打开\ext\examples\form\combos.html
5 楼 dengddq 2008-02-23  
record.data.Id改为record.id就可以了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext2.0show程序展示

    EXT2.0Show程序是一个专门用于展示Linux操作系统中EXT2文件系统内容的工具。EXT2是Linux早期广泛使用的文件系统之一，它为用户提供了一个高效、可靠的数据存储解决方案。EXT2.0Show程序的设计目的是帮助用户理解和...

    Ext2.0实用简明教程

    **Ext2.0实用简明教程** 在Web开发领域，ExtJS是一个强大的JavaScript库，用于构建用户界面。本文档将详细介绍ExtJS 2.0版本，帮助开发者快速掌握其核心概念和常用功能。 **一、序** 在互联网应用日益复杂的今天...

    Extjs2.0 智能提示

    例如，当创建一个新的面板时，提示会显示可设置的属性（如width、height、title等）和可调用的方法（如show、hide等），让编写代码变得更加直观。 此外，ExtJS 2.0还包括了大量的布局管理器，如Fit布局、Table布局...

    基于EXTJS简明教程2.0的笔记

    2. **Ext.Window** 代表一个弹出式的窗口，通过`show()`函数显示窗口内容。 3. **Ext.Panel** 是EXTJS中基础的容器组件，通过`render()`函数将其渲染到指定的DOM元素上，通常传入的是一个ID。 4. **JSON定义组件...

    ExtJS 2.0实用简明教程之应用ExtJS

    `ext-base.js` 包含了框架的基础库，它是ExtJS的核心功能，如类系统、事件处理、DOM操作等。而 `ext-all.js` 则是整个框架的集合，包含了所有预定义的组件和功能。`adapter` 文件夹的存在是为了提供与不同JavaScript...

    我与EXTJS有个约会

    此外，EXTJS还支持多种布局管理器，可以根据不同的应用场景灵活调整界面布局。 ##### 2.2 第一个例子，HELLOMM 作为初学者，最直观的学习方法是从简单的例子入手。下面是一个简单的“Hello World”示例： ```html...

    EXTJS介绍与开发指南

    此外，开源人vifir.com的后台管理系统也广泛使用EXTJS，涵盖了新闻发布、论坛、博客、专业数据库和客户服务等多个模块。 在技术架构上，EXTJS常与EJS（EasyJWeb+JPA+Spring2.5）后端框架配合使用，实现前后端分离。...

    google搜索技巧

    - **"intext:'BiTBOARD v2.0' BiTSHIFTERS Bulletin Board"**：查找特定版本的论坛系统。 - **"Asyntax error has occurred" filetype:ihtml**：查找可能存在语法错误的HTML文件。 - **"intitle:Login intext:'RT is...

Magicbox
Global site tag (gtag.js) - Google Analytics