Extjs EditorGridPanel的使用.(数据从后台读出) asp.net

原创 2011年01月15日 10:05:00

根据官方示例改写

<script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
<script src="ext-3.2.0/examples/ux/CheckColumn.js" type="text/javascript"></script>

//引用CheckColumn.js文件是因为实例化checkColumn的需要,否则会报checkColumn对象不存在的错误.
<script type="text/javascript">
    Ext.onReady(function() {
       
        var checkColumn = new Ext.grid.CheckColumn({
            header: 'student?',
            dataIndex: 'student'
        });


        var cm = new Ext.grid.ColumnModel({
            defaults: {
                sortable: true
            },
            columns: [{
                id: 'name',
                header: '个人姓名',
                dataIndex: 'name',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'passwd',
                header: '个人密码',
                dataIndex: 'passwd',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'gender',
                header: '个人性别',
                dataIndex: 'gender',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'roleid',
                header: '权限编号',
                dataIndex: 'roleid',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                id: 'stateid',
                header: '状态编号',
                dataIndex: 'stateid',
                width: 90,
                editor: new Ext.form.TextField({
                    allowBlank: false
                })
            }, {
                header: '身份',
                dataIndex: 'shenfen',
                width: 130,
                editor: new Ext.form.ComboBox({
                    typeAhead: true,
                    triggerAction: 'all',
                    transform: 'shenfeninfo',
                    lazyRender: true
                })
            }, {
                header: '余额',
                dataIndex: 'balance',
                width: 130,
                editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    maxValue: 1000
                })
            }, {
                header: '出生年月',
                dataIndex: 'time',
                width: 95,
                editor: new Ext.form.DateField({
                    format: 'm/d/y',
                    minValue: '01/01/1988',
                    //一个禁用的星期数组
                    disabledDays: [0, 6],
                    //禁用星期上提示的文字
                    disabledDaysText: '这些是不可选择的时间'
                })
            },checkColumn]
        });

        var store = new Ext.data.Store({
            autoDestory: true,
            url: 'userinfoxml.ashx',
            reader: new Ext.data.XmlReader({
                record: 'row',
                fields: [
                  { name: 'name', type: 'string' },
                  { name: 'passwd', type: 'string' },
                  { name: 'gender', type: 'string' },
                  { name: 'roleid', type: 'string' },
                  { name: 'stateid', type: 'string' },
                  { name: 'shenfen' },
                  { name: 'balance' },
                  { name: 'time' },
                  { name: 'student', type: 'bool' }
               ]
            }),
            sortInfo: { field: 'roleid', direction: 'ASC' }
        });

        var grid = new Ext.grid.EditorGridPanel({
            store: store,
            cm: cm,
            renderTo: 'editor-grid',
            width: 900,
            height: 230,
            title: 'my edit grid',
            frame: true,
            plugins:checkColumn
        });

        store.load({
            callback: function() {
                Ext.Msg.show({
                    title: '数据加载回传成功',
                    msg: '数据源已经加载,数据处理成功',
                    modal: false,
                    icon: Ext.Msg.INFO,
                    buttons: Ext.Msg.OK
                });
            }
        });


    })
</script>

 

 

<body> 
    <div>body中的第一个元素不能是纯文本</div>
    <select name="shenfeninfo" id="shenfeninfo" style="display: none;">
     <option value="student">student</option>
     <option value="teacher">teacher</option>
    </select>
    <div id="editor-grid"></div>
</body>

相关文章推荐

Extjs、ASP.net前后台Grid分页 数据库多表交互

1 建立ASP.net Web应用程序 2 在App_Data文件夹内建立数据库db_test       建立2张表,通过use_id的外键找出‘这个学生的成绩’3 插入一些数据,数据可以自定义  ...

ASP.NET中使用JSON方便实现前台与后台的数据交换

一、前台向后台请求数据 在页面加载时,有时需要对一些表单进行初始化,此时可以利用JQuery的 get 函数向后台发起异步请求:...

关于“Asp.net 中后台CS读取数据库数据生成数组传递给前台页面JS使用”

最近,由于项目需要需要将传感器的地理位置信息标记在百度地图上,无线传感器节点能够将自身经纬度信息,通过网络传递到数据库存储起来,然后将其读出来并在百度地图在地图上标记显示出来. 首先,在后台CS需要将...
  • zjx8613
  • zjx8613
  • 2012年05月30日 16:12
  • 5885

extjs+asp.net后台管理系统页面

  • 2013年06月25日 16:02
  • 671KB
  • 下载

ASP.NET+Extjs2.0读取Json数据显示在GridPanel面板上面

//IE9必须加上此段代码 if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragmen...

Asp.net生成Extjs-Tree数据格式的json类

using System; using System.Collections; using System.Collections.Generic; using System.Text; //u...

ASP.NET+ExtJs2.0+Ajax连接数据验证用户登录

var loginPanel; Ext.onReady(function() { //登录面板 loginPanel = new ...

ASP.NET + EXTJS 实现类似GridView行内编辑、Pannel、分页、增删改查、数据验证,格式转换

Extjs版本:3.2.1 Newtonsoft.Json.dll (把数据序列化为Json格式)文件可在Newtonsoft官网去下载http://james.newtonking.com/ A...

Asp.net WebAPI 构建后台数据接口

1.新建项目 2.选择WebApi,并使用空模板(这里不想要一些其他的mvc的东西)3.新建一个model4.写几个属性using System; using System.Collections....

HighCharts-Asp.net后台取Json数据模拟

博客缘起     最近项目需要用的图表,发现HighCharts是一个好用的工具。图表美观大方,公共API调用简练。缺点是图表种类不是很多,但是已经足够用了。     由于需要根据查询条件查询数据...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs EditorGridPanel的使用.(数据从后台读出) asp.net
举报原因:
原因补充:

(最多只允许输入30个字)