`
83026191
  • 浏览: 45719 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

连接数据库的GridPanel

阅读更多

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 连接数据库的相关操作

    EXT本身并不直接处理数据库连接,它专注于构建富客户端应用程序的用户界面,提供丰富的组件和API。在这个例子中,我们将探讨如何使用EXT连接SQL Server数据库,实现Editgridpanel的数据展示、分页、查询和删除功能。...

    EXTJS 增删改查及c#json连接数据库

    在"EXTJS 增删改查及c#json连接数据库"这个主题中,我们将深入探讨EXTJS如何与后端C#.NET结合,通过JSON数据交换实现对数据库的CRUD(创建、读取、更新、删除)操作。 首先,EXTJS的GridPanel是进行数据展示的核心...

    通过Servlet让Extjs GridPanel 显示数据库数据.docx

    // 连接数据库,执行SQL查询 String sql = "SELECT * FROM contacts"; List, Object>> resultList = new ArrayList(); try (Connection conn = DriverManager.getConnection(DB_URL, USER, PASS); ...

    extjs3连接mysql数据库实现增删查改功能

    同时,ExtJS 3支持AJAX技术,通过异步方式与服务器进行数据交换,这正是连接数据库的基础。 1. **连接配置**: 要连接到MySQL数据库,你需要创建一个服务器端接口,通常使用PHP、Java、Node.js等后端语言。这个...

    ext做的数据库管理系统

    在EXT中,开发者可以利用GridPanel展示数据库表格,FormPanel进行数据输入,TreePanel管理数据库结构,而Window或Dialog组件可以用于弹出式操作,如查询条件设置。EXT的数据绑定机制使得前端UI和后端数据之间能实时...

    c#动态浏览数据库的数据源码

    为了大家更好的更方便的使用本示例,就附加了一个功能:只要添加本地的数据库连接,选择数据库里面的表,就可以对代码进行方便的测试. 更多可以查看包里的项目说明,并附有图片展示。 项目结构上使用三层,为了增加代码...

    动态浏览数据库的数据源码

    为了大家更好的更方便的使用本示例,就附加了一个功能:只要添加本地的数据库连接,选择数据库里面 的表,就可以对代码进行方便的测试. 更多可以查看包里的项目说明,并附有图片展示。 项目结构上使用三层,为了增加...

    简单ext jsp数据库操作例子

    在学生管理系统中,EXT JS库将用于创建表格、表单和其他交互元素,JSP页面将处理用户的请求并进行数据库查询,而数据库连接组件则负责与后台数据库建立连接并执行SQL语句。 1. **EXT JS库的使用** EXT JS库提供了...

    Ext 操作数据库,对数据的增删改查,包括数据库,Ajax请求和store请求的设置

    Store与数据源(如数据库或服务器)连接,可以加载、修改和保存数据。 创建(Create):当用户添加新数据时,可以通过Store的`add()`方法将新记录添加到Store中,然后调用`sync()`方法将数据同步到服务器端。在后台...

    动态浏览数据库的数据源码.rar

    为了大家更好的更方便的使用本示例,就附加了一个功能:只要添加本地的数据库连接,选择数据库里面 的表,就可以对代码进行方便的测试. 更多可以查看包里的项目说明,并附有图片展示。 项目结构上使用三层,为了增加...

    Ext 表单示例演示 视频

    总结来说,这个示例涵盖了Ext JS表单设计、XML数据绑定、GridPanel组件使用以及可能的数据库交互。通过学习和实践这个示例,开发者可以深入了解如何在Web应用中创建动态、交互式的数据展示界面。

    Extjs分页使用java实现数据库数据查询.docx

    在这个例子中,创建了一个名为`store`的`Store`对象,它通过`HttpProxy`连接到后台的`QueryDetailServlet`。`proxy`配置项指定了数据请求的URL。`JsonReader`则定义了数据的结构,如`rowNo`、`gpsid`和`policeName`...

    extjs3.0 新增\删除\修改\查询 mysql数据库 实例

    在这个实例中,你可能会找到一个名为"DataStore.js"的文件,里面定义了一个Store对象,它连接到MySQL数据库,并通过Ajax请求获取或更新数据。 接着,我们来看“查询”操作。在ExtJS中,我们可以使用GridPanel展示...

    ExtJs java实例 (个人/家庭收支管理系统)第2版加强版

    关于数据库,从描述中可以看出,用户需要自己建立并连接数据库。这可能意味着数据库脚本或配置文件包含在压缩包内。用户可能需要创建相应的数据库结构,例如,可能有一个名为`income_expense`的表,包含`id`(主键)...

    Ext列表特效(远程加载数据)

    1、Ext版本:3.2.1; 2、运行环境:VS 2008 以上; 3、远程加载数据,数据在程序中生成,无需连接数据库或XML文件; 4、运用Viewport管理页面布局 5、GridPanel的各种功能和特效

    ext.net与ADO.NET增删改查操作

    // 连接数据库,构建SQL插入语句,执行插入并返回受影响的行数 } public static DataTable SelectRecords(string sql) { // 执行SQL查询,返回DataTable } public static int UpdateRecord(string ...

    Extjs教程_第五章_使用grid显示数据(3)

    // 连接数据库 $sql = "SELECT * FROM movies"; $arr = array(); // 如果查询失败 if (!$rs = mysql_query($sql)) { echo '{success:false}'; } else { // 将结果集转化为对象数组 while ($obj = mysql_fetch_...

    struts2+ExtJS(带分页效果)

    **jdbcdemo** 文件可能是一个示例数据库连接程序,展示了如何使用JDBC(Java Database Connectivity)与数据库进行交互。在Struts2应用中,JDBC常用于数据库操作,如插入、更新、删除记录。JDBC提供了标准的API,...

    EXTjs+oracle

    在这个案例中,Store将连接到Oracle数据库,实现数据的获取和更新。 3. **EXTjs的GridPanel**:GridPanel是EXTjs中的一个核心组件,用于展示表格数据。通过配置Store和ColumnModel,可以创建出功能丰富的数据表格,...

    Ext教程表单表格的使用

    在实际应用中,FormPanel和GridPanel常结合使用,例如在表单中编辑数据,然后保存到数据库,或者从数据库加载数据到表格中显示。在上述代码的`load`和`submit`方法中,表单数据的加载和提交通过URL与服务器进行交互...

Global site tag (gtag.js) - Google Analytics