Ext.onReady(function (){
var _grid=new Ext.grid.GridPanel({
id:"view_grid",
renderTo:Ext.getBody(),
height:200,
width:350,
//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();
//url指定路径(数据)
proxy:new Ext.data.HttpProxy({url:"http://localhost/IISHelp/ExtJSTest/server/app/test/11/xmlstore.asp"}),
fields:["name","sex","age"]
}),
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
//第一个参数自己本生
//第2个参数第几行
"rowselect":function(_sm, _index , _r){
alert(_index);
//把数据加载到formPanel
Ext.getCmp("view_form").getForm().loadRecord(_r);
}
}
})
});
var _form= new Ext.form.FormPanel({
id:"view_form",
height:200,
width:350,
frame:true,
renderTo:Ext.getBody(),
defaultType:"textfield",
items:[{
fieldLabel:"姓名",
name:"name"
},{
fieldLabel:"年龄",
name:"age"
},{
fieldLabel:"性别",
name:"sex"
}],
buttons:[{
text:"修改",
handler:function(){
if(Ext.getCmp("view_grid").getSelectionModel().getCount==0)
{
return;
}
//被选中的行
Ext.getCmp("view_grid").getSelectionModel().getSelected()
var _form =this.ownerCt.getForm().getValues();
_rs.set("name",_values["name"]);
_rs.set("sex",_values["sex"]);
_rs.set("age",_values["age"]);
//提交(必须的)
_rs.commit();
}
}]
});
})
分享到:
相关推荐
EXT本身并不直接处理数据库连接,它专注于构建富客户端应用程序的用户界面,提供丰富的组件和API。在这个例子中,我们将探讨如何使用EXT连接SQL Server数据库,实现Editgridpanel的数据展示、分页、查询和删除功能。...
在"EXTJS 增删改查及c#json连接数据库"这个主题中,我们将深入探讨EXTJS如何与后端C#.NET结合,通过JSON数据交换实现对数据库的CRUD(创建、读取、更新、删除)操作。 首先,EXTJS的GridPanel是进行数据展示的核心...
// 连接数据库,执行SQL查询 String sql = "SELECT * FROM contacts"; List, Object>> resultList = new ArrayList(); try (Connection conn = DriverManager.getConnection(DB_URL, USER, PASS); ...
同时,ExtJS 3支持AJAX技术,通过异步方式与服务器进行数据交换,这正是连接数据库的基础。 1. **连接配置**: 要连接到MySQL数据库,你需要创建一个服务器端接口,通常使用PHP、Java、Node.js等后端语言。这个...
在EXT中,开发者可以利用GridPanel展示数据库表格,FormPanel进行数据输入,TreePanel管理数据库结构,而Window或Dialog组件可以用于弹出式操作,如查询条件设置。EXT的数据绑定机制使得前端UI和后端数据之间能实时...
为了大家更好的更方便的使用本示例,就附加了一个功能:只要添加本地的数据库连接,选择数据库里面的表,就可以对代码进行方便的测试. 更多可以查看包里的项目说明,并附有图片展示。 项目结构上使用三层,为了增加代码...
为了大家更好的更方便的使用本示例,就附加了一个功能:只要添加本地的数据库连接,选择数据库里面 的表,就可以对代码进行方便的测试. 更多可以查看包里的项目说明,并附有图片展示。 项目结构上使用三层,为了增加...
在学生管理系统中,EXT JS库将用于创建表格、表单和其他交互元素,JSP页面将处理用户的请求并进行数据库查询,而数据库连接组件则负责与后台数据库建立连接并执行SQL语句。 1. **EXT JS库的使用** EXT JS库提供了...
Store与数据源(如数据库或服务器)连接,可以加载、修改和保存数据。 创建(Create):当用户添加新数据时,可以通过Store的`add()`方法将新记录添加到Store中,然后调用`sync()`方法将数据同步到服务器端。在后台...
为了大家更好的更方便的使用本示例,就附加了一个功能:只要添加本地的数据库连接,选择数据库里面 的表,就可以对代码进行方便的测试. 更多可以查看包里的项目说明,并附有图片展示。 项目结构上使用三层,为了增加...
总结来说,这个示例涵盖了Ext JS表单设计、XML数据绑定、GridPanel组件使用以及可能的数据库交互。通过学习和实践这个示例,开发者可以深入了解如何在Web应用中创建动态、交互式的数据展示界面。
在这个例子中,创建了一个名为`store`的`Store`对象,它通过`HttpProxy`连接到后台的`QueryDetailServlet`。`proxy`配置项指定了数据请求的URL。`JsonReader`则定义了数据的结构,如`rowNo`、`gpsid`和`policeName`...
在这个实例中,你可能会找到一个名为"DataStore.js"的文件,里面定义了一个Store对象,它连接到MySQL数据库,并通过Ajax请求获取或更新数据。 接着,我们来看“查询”操作。在ExtJS中,我们可以使用GridPanel展示...
关于数据库,从描述中可以看出,用户需要自己建立并连接数据库。这可能意味着数据库脚本或配置文件包含在压缩包内。用户可能需要创建相应的数据库结构,例如,可能有一个名为`income_expense`的表,包含`id`(主键)...
1、Ext版本:3.2.1; 2、运行环境:VS 2008 以上; 3、远程加载数据,数据在程序中生成,无需连接数据库或XML文件; 4、运用Viewport管理页面布局 5、GridPanel的各种功能和特效
// 连接数据库,构建SQL插入语句,执行插入并返回受影响的行数 } public static DataTable SelectRecords(string sql) { // 执行SQL查询,返回DataTable } public static int UpdateRecord(string ...
// 连接数据库 $sql = "SELECT * FROM movies"; $arr = array(); // 如果查询失败 if (!$rs = mysql_query($sql)) { echo '{success:false}'; } else { // 将结果集转化为对象数组 while ($obj = mysql_fetch_...
**jdbcdemo** 文件可能是一个示例数据库连接程序,展示了如何使用JDBC(Java Database Connectivity)与数据库进行交互。在Struts2应用中,JDBC常用于数据库操作,如插入、更新、删除记录。JDBC提供了标准的API,...
在这个案例中,Store将连接到Oracle数据库,实现数据的获取和更新。 3. **EXTjs的GridPanel**:GridPanel是EXTjs中的一个核心组件,用于展示表格数据。通过配置Store和ColumnModel,可以创建出功能丰富的数据表格,...
在实际应用中,FormPanel和GridPanel常结合使用,例如在表单中编辑数据,然后保存到数据库,或者从数据库加载数据到表格中显示。在上述代码的`load`和`submit`方法中,表单数据的加载和提交通过URL与服务器进行交互...