// JavaScript Document
//EditorGridPanel实现单元格选中
MoneyGrildPanel=Ext.extend(Ext.grid.EditorGridPanel,{
typeCnb:null,
inserted:[],
//定义conn对象
conn:new Ext.data.Connection(),
constructor:function(){
this.typeCnb= new Ext.form.ComboBox({
triggerAction:'all',
mode:"local",
value:"全部",
displayField:"type",
listeners:{
select:{
fn:this.onViewTypeSelect,
scope:this
}
},
store:new Ext.data.SimpleStore({
data:["收入","支出","全部"],
expandData:true,
fields:["type"]
})
});
MoneyGrildPanel.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
width:300,
//给表格设置行选中
sm:new Ext.grid.RowSelectionModel({
//确定单选
singleSelect:true
}),
height:400,
tbar:[{text:"保存",
handler:this.onSaveButtonClick,
scope:this
},"-",{
text:"添加",
handler:this.onInsertButtonClick,
scope:this
},"-",{
text:"删除",
handler:this.onRemoveButtonClick,
scope:this
},"-","查看方式",this.typeCnb],
store:new Ext.data.SimpleStore({
autoLoad:true,
url:"http://localhost/ExtJSTest/server/app/test/18/list.asp",
fields:["id","type",{name:"money",type:"int"}]
}) ,
columns:[{
header:"类型",
dataIndex:"type",
editor: new Ext.form.ComboBox({
triggerAction: 'all',
mode:"local",
displayField:"type",
store:new Ext.data.SimpleStore({
data:["收入","支出"],
expandData:true,
fields:["type"]
})
})
},{
header:"金额",
dataIndex:"money",
editor:new Ext.form.NumberField({
maxValue:10000,
minValue:1
})
}]
});
/* 测试 conn等同于Ext.Ajax*/
/*
Ext.Ajax.on("requestcomplete", function(_conn,_response,_options){
//_response.responseText 获取json数据
//_response.responseXML.xml 回去xml的数据
alert(_response.responseText);
});
*/
},
//select 的时候触发事件
onViewTypeSelect:function(_combo){
var _type=_combo.getValue();
if(_type == "全部")
//_type== 全部 就把全部的信息显示给用户
this.getStore().clearFilter();
else
// alert('sss');
//fitler 方法会过滤Store中相同的值显示给用户
this.getStore().filter("type",_combo.getValue());
// alert(_combo.getValue());
},
onSaveButtonClick:function(){
//modified 保存了 Store 中被修改的行
var _n=this.getStore().modified;
var _temp=[];
for(var _i=0 ;_i<_n.length;_i++)
{
if(_n.get("id")=="")
{
continue;
}
var _data={};
var _j="";
for(_j in _n[_i].modified)
_data[_j]=_n[_i].get(_j);
//_n[_i].modified(修改过的值)把修改过的值放在_temp里
//Ext.apply({},_n[_i].modified) 把修改的值复制下
//{id:_n[_i].get("id")} 获取数据库的id值
//Ext.apply(Ext.apply({},_n[_i].modified),{id:_n[_i].get("id")}) 早把id也复制进去
//_temp.push(Ext.apply(Ext.apply({},_n[_i].modified),{id:_n[_i].get("id")}));//获取没该的值
_temp.push(Ext.apply(_data,{id:_n[_i].get("id")}));
}
for(var _i=0;I<this.inserted.length;_i++)
{
//把添加的值给_temp
_temp.push(this.inserted[_i].data);
// alert(Ext.util.JSON.encode(_temp));
}
/* conn等同于Ext.Ajax*///任何Ajax请求发送之前触发
conn.on("requestcomplete",this.onSaveInsertData,this);
//提交到数据库 conn等同于Ext.Ajax
conn.request({url:"http://localhost/ExtJSTest/server/app/test/18/post.asp",
params:{content:Ext.util.JSON.encode(_temp)}});
alert(Ext.util.JSON.encode(_temp));
//var _store=this.getStore();
//commitChanges回去把修改过的信息进行保存
this.getStore().commitChanges();
this.onViewTypeSelect(this.typeCnb);
},
//添加行
onInsertButtonClick:function(){
//添加行初始值
var _rs=new Ext.data.Record({
id:"",
type:"",
money:0
});
this.getStore().add(_rs);
//添加行的时候提示用户保存
_rs.set("type","收入");
_rs.set("money",1);
//指定输入地方 this.getStore().getCount-1 表示表单最后一行
this.startEditing(this.getStore().getCount-1,0);
//把——rs的Record放到inserted中
this.inserted.push(_rs);
},
//能确保新添加的行也能修改
onSaveInsertData:function(_conn,response){
//添加的_xml信息
var _xml=_response.responseXML;
//alert(_xml);
var _root=_xml.documentElement;
//alert(_root);
for(var _i=0;_i<_root.childNodes.length;i++)
{
// alert(_root.childNodes[_i].getText());
this.inserted[_i].set("id",_root.childNodes[_i].text);
}
//提交
this.getStore().commitChanges();
this.inserted[];
},
//删除
onRemoveButtonClick:function()
{
//获取选中的行
var _sm=this.getSelectionModel();
try{
if(_sm.getCount() == 0)
{
throw Error("尚未选定行");
}
Ext.Msg.confirm("系统询问","你是否确认删除此记录?",this.onRemoveQuestion,this)
}catch(_err){
Ext.msg.alert("系统提示",_err.description)
}
},
//删除
onRemoveQuestion:function(_btn){
if(_btn=="yes"){
var _rs=this.getSelectionModel().getSelected();
//删除
this.getStore().remove(_rs);
if(_rs.get("id") != ""){
this.conn.request({url:"http://localhost/ExtJSTest/server/app/test/18/delete.asp",params:{id:_rs.get("id")}});
/* conn等同于Ext.Ajax*///任何Ajax请求发送之前触发
conn.on("requestcomplete",this.onSaveInsertData,this);
}
else{
//用户在没有点击保存的情况下删除
this.inserted.remove(_rs);
this.getStore().modifed.remove(_rs);
}
}
}
});
分享到:
相关推荐
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
在标题中提到的“可视化编程工具”,指的是用于简化ExtJS开发过程的一种图形化工具,这种工具允许开发者通过拖拽和配置组件来创建应用的界面,从而提高开发效率。 描述中提到了“extJS汉化中文版”,这表明这个工具...
EXTJS的图形组件不仅适用于数据可视化,还适合构建仪表盘和报告,为企业决策提供直观的数据支持。它们可以与其他EXTJS组件(如表格、面板、窗口等)灵活组合,构建出功能完善的业务系统。 在实际开发中,EXTJS的...
extjs高级编程extjs高级编程extjs高级编程
ExtJs可视化开发工具3.0是一款专为提升开发效率而设计的工具,它极大地简化了ExtJS应用的创建过程,让开发者无需编写大量的JavaScript代码,就能构建出功能丰富的用户界面。这款工具的核心特性在于其直观的拖放界面...
ExtJs可视化开发工具,或尽然拖放控件轻松实现页面布局,很好用
EXTJS可视化设计器是一款强大的前端开发工具,专门针对EXTJS框架设计,它允许开发者通过图形化界面来构建应用程序,显著提高了开发效率。EXTJS是一个流行的JavaScript库,用于创建数据驱动的富客户端Web应用,其组件...
extjs组建继承结构图 让你了解extjs的整个架构!
"ExtJs可视化工具(汉化)"指的是专为ExtJs设计的一种图形化开发工具,它使得开发者可以通过拖拽和配置的方式创建用户界面,大大提升了开发效率。 在描述中提到的“汉化包”意味着这个工具已经进行了本地化处理,...
ExtJs 推出了ExtJs 可视化开发工具,这里是所需的三个文件:AdobeAIRInstaller.zip,Ext_Disigner_Preview.rar,xds_preview.air。请按说明文档一次安装
ExtJS的可视化开发工具,如标题所提及的“Extjs 可视化开发工具(中文)”,是为方便开发者快速设计和布局UI而设计的。 这个开发工具包含两个主要的文件,即`xds_preview.air`和`Ext_Designer_Preview.rar`。`xds_...
extjs可视化开发工具,希望可以帮助大家
EXTJS可视化网页编译器是EXTJS框架的一个重要工具,它允许开发者通过直观的图形界面来设计和编译EXTJS应用,极大地简化了开发流程。 EXTJS编译器的核心特性包括: 1. **可视化设计**:该编译器提供了拖放功能,...
在“extjs可视化开发软件”中,我们可以推测这是一款专门针对EXTJS的开发工具,它可能提供了图形化的界面来辅助开发者进行EXTJS应用的构建。这样的工具通常会简化代码编写过程,通过拖放组件、设置属性等方式实现...
EXTJS可视化设计器是一款强大的前端开发工具,专为创建基于EXTJS框架的应用程序提供了一个直观的图形界面。汉化版使得中国开发者能够更加便捷地使用这款工具,无需应对语言障碍,从而提高开发效率和理解度。 EXTJS...
在图形化开发环境中,利用合适的工具可以极大地提高开发效率,这就是Eclipse的ExtJS图形化开发插件的作用。 Eclipse是广受欢迎的Java IDE,它支持多种语言和框架的开发,包括ExtJS。这款插件为开发者提供了图形化的...
"ExtJS 可视化设计器"则是针对这个框架设计的一款工具,帮助开发者通过图形化界面来设计和构建ExtJS应用,从而减少了编写代码的工作量,提高了开发效率。 这款可视化设计器包含以下几个核心知识点: 1. **组件拖放...
在EXTJS中,"Extjs自动最大化panel"是一种高级布局技术,它允许用户创建一个能够自动适应并填充其容器的面板(Panel)。这种特性对于构建响应式和自适应的用户界面至关重要,尤其在现代Web应用中,用户期望界面能够...
CooliteToolkit(ExtJS可视化控件)Demo ExtJS JavaScript Framework and asp.net ajax Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件,Coolite Toolkit非常适合做web应用程序的开发,它提供了很多专业的Asp.net...
在EXTJS中,EditorGridPanel是一种可编辑的表格组件,它允许用户直接在表格单元格内编辑数据。然而,当在EditorGridPanel中嵌入ComboBox(下拉选择框)作为编辑器时,可能会遇到一个问题,即ComboBox显示的不是其...