- 浏览: 45699 次
- 性别:
- 来自: 北京
最新评论
-
啊哈小小勇:
大哥,你的service怎么弄的?
spring+struts2+hibernate+extjs做的分页 -
liuzhiqiangmeng:
...
tomcat启动时出现java.lang.NoClassDefFoundError: -
pg_caolei:
谢谢了,找了很长时间!万分感谢!
ExtJS在生成Tree时图片不显示问题
// JavaScript Document// JavaScript Document
//PersonViewGridPanel.SIORE_URL="http://localhost/IISHelp/ExtJSTest/server/app/test/11/xmlstore.asp"
/****************************************************************************************************/
PersonListFormPanel=Ext.extend(Ext.form.FormPanel,{
//构造方法
//_cfg下面可以实现继承
constructor:function(_cfg){
if(_cfg==null)
{
_cfg={};
}
//应用于当前主类本身
Ext.apply(this,_cfg);
var _readOnly=this["readOnly"]==null?false:this["readOnly"],
PersonListFormPanel.superclass.constructor.call(this,{
height:200,
width:350,
frame:true,
labeWidth:45,//
// renderTo:Ext.getBody(),
defaultType:"textfield",
defaults:{anchor:"98%",readOnly:this["readOnly"]==null?false:this["readOnly"]},
//Ext.apply{this.form,{baseCls:"x-plain"}),
items:[{
fieldLabel:"姓名",
name:"name"
},{
fieldLabel:"年龄",
name:"age"
},{
xtype:'combo',
fieldLabel:"性别",
hiddenName:"sex",
readOnly:true,
mode:"local",
displayField:"sex",
triggerAction:"all",
//value:"",
//设置是否只读
disabled:_readOnly,
store:new Ext.data.SimpleStore({
fields:["sex"],
data:[["男"],["女"]]
})
}]
});
//表单提交事件
this.addEvents("submit");
},
//表单提交
submit:function(_params){
if(_params==null)
_params={};
try{
if(this.url!="")
//success:this.onSubmit通过它决定提交是否成功
this.getForm().submit({url:this.url,params=_params,success:this.onSubmit,waitTitle:"数据传送",waitMsg:"数据传送中,请稍后...",scope:this});
}catch(_err){
}
},
//获取用户添加值
getValues:function(){
//?record
//验证
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("submint",this,_action,this.getValues());
}
});
/*************************************************************************************************/
//继承上面的FormPanel
PersonListViewFormPanel=Ext.extend(PersonListFormPanel,{
//构造方法
constructor:function(){
PersonListViewFormPanel.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
//defaults:{readOnly:true}
width:355,
readOnly:true
})
}
})
/************************************************************************************************/
//添加 继承 下面写的widnow
InsertPersonInfoWindow=Ext.extend(PersonInfoWindow,{
//url会把路径传给PersonInfoWindow 的url
url:"路径",
title:"添加人员",
//从写
onSubmit:function(_form,_action,_values){
//添加的时候返回id
var _data=_values.data;
Ext.apply(_data,{id:_action.result.id});
//取id
//alert(_action.result.id)
try{
this.fireEvent("submit",this,new Ext.data.Record(_data));
// alert(Ext.util.JSON.encode(_data));
}catch(_err)
{
return;
}
this.close();
}
});
/************************************************************************************************/
//修改 继承 下面的widnow(可以从写)
UpdatePersonInfoWindow=Ext.extend(PersonInfoWindow,{
title:"修改人员",
url:"",
pnId:"",
//加载的时候获取表单数据
load:function(_r){
//form指的是PersonListFormPanel的对象
this.form.setValues(_r);
this.pnId=_r.get("id");
},
onSubmitClick:function(){
alert(this.pnId);
this.form.submit();
}
//从写
onSubmit:function(_form,_action,_values){
//添加的时候返回id
var _data=_values.data;
Ext.apply(_data,{id:this.pnId});
//取id
//alert(_action.result.id)
try{
this.fireEvent("submit",this,new Ext.data.Record(_data));
alert(Ext.util.JSON.encode(_data));
}catch(_err)
{
return;
}
this.close();
}
});
/***********************************************************************************************************/
//window
PersonInfoWindow=Ext.extend(Ext.Window,{
//引用panel
form:null,
url:""
constructor:function(_cfg){
Ext.apply(this,_cfg);
this.form=new PersonInfoFormPanel({url:this.url});
this.form=new PersonListFormPanel(),
PersonInfoWindow.superclass.constructor.call(this,{
plain:true,
width:370,
modal:true,
items:this.form,
closeAction:"hide",
buttons:[{
text:"确定¨",
handler:this.onSubmitClick,
scope:this
},{
text:"取消",
handler:this.onCancelClick,
scope:this
}]
});
//
//alert(this.onSubmitClick())
//¶¨Òåʼþ
this.addEvents("submit");
this.form.on("submit",this.onSubmit,this);
},
close:function(){
this.form.reset();
this.hide();
},
//(on)事件
onSubmitClick:function(){
/*
try{
// this.fireEvent触发事件 from.getValues()调用上面的
this.fireEvent("sumbmit",this,this.from.getValues());
//alert(Ext.util.JSON.encode(this.form.getValues().data));
}catch(_err){
//捕捉错误返回
//return;
}
this.close();*/
this.form.submit();
},
onCancelClick:function(){
this.close();
},
onSubmit:function(_form,_action,_values){
//取id
//alert(_action.result.id)
try{
//submit和表格通信的
this.fireEvent("submit",this,_values);
}catch(_err)
{
return;
}
this.close();
}
});
/**********************************************************************************************/
PersonListGridPanel =Ext.extend(Ext.grid.GridPanel,{
//引用 InsertPersonInfoWindow 等于java的实例化
insertWin:new InsertPersonInfoWindow(),
//引用 UpdatePersonInfoWindow 等于java的实例化
updateWin:new UpdatePersonInfoWindow(),
constructor:function(){
//this.insertWin=new InsertPersonInfoWindow(),
/*
这和java里面的继承一个意思。super是超级,父亲的意思,superclass就是父类的意思,constructor是构造器的意思,
这句代码的意思就是调用它父类的构造函数
*/
PersonListGridPanel.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
height:200,
width:350,
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(){
//this.remove();
Ext.Msg.confirm("系统提示","是否删除",onRemovePerson,this);
}
}],
//enableColumnMove:false,
//colModel 等同于columns
colModel:new Ext.grid.ColumnModel([
{header: "姓名", width: 100, sortable: true, dataIndex: 'name'},//menuDisabled:true
{header: "年龄", width: 100, sortable: true, dataIndex: 'sex'},
{header: "性别", width: 100, sortable: true, dataIndex: 'age'}
]),
store:new Ext.data.JsonStore({
autoLoad:true,//等于store.load();
data:[{name:"sss",age:28,sex:"女"},{name:"sss",age:28,sex:"男"}],
fields:["id","name","age","sex"]
}),
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
"rowselect":{
//调用选中行的事件
fn:onRowSelect,
// fn:function(_sel, _index , _r){
// alert(_index);
//°获取上面的formPanel
//Ext.getCmp("view_form").getForm().loadRecord(_r);
// this.fireEvent("rowselect",_r);
// },
//作用域
scope:this
}
}
})
});
// }
//提交时间
this.insertWin.on("submit",this.onInserWinSubmit,this);
//事件
this.addEvents("rowselect");
this.updateWin.on("submit",this.onUpdateWinSubmit,this);
},
//添加方法
insert:function(){
this.getStore().add(_r);
},
onInserWinSubmit:function(win,_r){
this.insert(_r);
},
//定义选中的方法
getSelected:function(){
//得到当前GirdForm的引用
var _sm=this.getSelectionModel();
//判断如果当前没有被选中的话点击修改择提示错误
if(_sm.getCount()==0)
throw Error("请选定要修改的数据");
return _sm.getSelected();
},
//修改方法
update:function(_r){
try{
//选中的值store(Record)
var _sr=this.getSelected();
//json数组
var _data=_sr.data;
//便利json的属性
for(var _i in _data){
//讲给定修改的值_r付给修改后的值_i
_sr.set(_i,_r.get(_i)) ;
}
//提交
_sr.commit();
//修改后下面的panel也跟着改变
this.fireEvent("rowselect",_sr)
}catch(_err){
}
},
//修改事件
onUpdateWinSubmit:function(_win,_r){
this.update(_r);
},
//删除
remove:function(){
try{
var _st=this.getSelected();
Ext.Ajax.request({url:"",params:{id:_st.get("id")}});
//this.getStore().remove(this.getSelected());
this.getStore().remove(_st);
this.fireEvent("rowselect",new Ext.data.Record({
name:"",
age:"",
sex:"男"
}))
}catch(_err){
Ext.Msg.alert("系统提示",_err.description);
}
},
//删除事件
onRemovePerson:function(_btn)
{
if(_btn=="yes")
this.remove();
},
//选中行的事件(修改)
onRowSelect:function(_sel, _index , _r){
this.fireEvent("rowselect",_r);
}
});
发表评论
-
extjs 图片上传
2009-09-04 13:57 4568上传控件: var pa ... -
ExtJS在生成Tree时图片不显示问题
2009-09-04 09:49 2369第一种改法: 该问题会在系统不连互联网的情况下暴露。 ... -
ExtJS精华函数解析(仅个人见解)
2009-09-02 15:37 1390One: Ext的最先开始的 ... -
extjs树
2009-08-31 09:39 1177oneTreePanel =Ext.extend(Ext.tr ... -
extjs组建化编程(GridPanel分页json的)
2009-08-31 09:37 1647JsonPagingGridPanel =Ext.extend ... -
extjs组建化编程(GridPanel分页xml的)
2009-08-31 09:33 1318PagingGridPanel =Ext.extend(Ext ... -
extjs组建化编程(EditorGridPanel)
2009-08-31 09:30 2400// JavaScript Document//EditorG ... -
连接数据库的GridPanel
2009-08-31 09:26 939Ext.onReady(function (){ va ... -
简单的GridPanel
2009-08-31 09:23 771Ext.onReady(function (){ v ... -
json和xml的数据交互
2009-08-31 09:22 1050json的: Ext.onReady(function ( ... -
extjs简单登陆窗体
2009-08-24 14:22 1423html代码: <!DOCTYPE HTML ... -
extjs和servelt 的简单交互
2009-08-24 14:18 892-Java代码 package com.test; ...
相关推荐
FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...
通过深入学习并实践EXTJS的图形编程,开发者能够构建出具有专业级图形展示能力的Web应用,为用户提供直观、交互性强的数据分析工具。在实际项目中,结合EXTJS的图形组件,我们可以实现复杂的业务逻辑,提高工作效率...
在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...
extjs高级编程extjs高级编程extjs高级编程
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...
在标题中提到的“可视化编程工具”,指的是用于简化ExtJS开发过程的一种图形化工具,这种工具允许开发者通过拖拽和配置组件来创建应用的界面,从而提高开发效率。 描述中提到了“extJS汉化中文版”,这表明这个工具...
extjs组建继承结构图 让你了解extjs的整个架构!
ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**:首先,定义一个FormPanel,并在其...
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
在EXTJS4中,FormPanel是一个非常重要的组件,用于创建包含表单元素的用户界面。在某些场景下,我们可能需要一个FormPanel实例能够根据不同的情况提交到不同的URL。这个问题可以通过灵活地设置和操作FormPanel及其...
在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...
extjs formpanel学习,秘诀,笔记
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用的用户界面。它提供了丰富的组件模型、数据绑定机制以及丰富的API,使得开发者能够创建功能丰富的动态表单。在"动态添加表单"这个主题...
它强调了JavaScript面向对象编程(OOP)在Extjs框架中的应用,并通过实例演示了如何使用各种组件和布局来创建复杂的用户界面。本教程通过递进式的结构,使读者从基础知识起步,逐步掌握Extjs的高级应用,最终能够...
在ExtJS中,我们可以利用FormPanel组件来构建这个登录界面,同时配合Field组件(如TextField)来处理输入。 首先,创建一个FormPanel实例,设置其布局为fit(适应布局),然后添加TextField组件分别对应用户名和...
标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合,涉及到的主要是两个前端富文本编辑器库:FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时,如何将这两者有效地整合以实现复杂的用户界面...