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的EditorGridPanel中的ComboBox列中显示值的问题

有一段时间没写博客了,最近因项目一直在忙,终于抽出空来写点东西,在项目中使用了extjs的editorgridpanel,但是其中的combobox在选择了相应的选项后,grid中显示的是值域(val...
  • sonwing_for
  • sonwing_for
  • 2017年07月14日 08:48
  • 344

ExtJS EditorGridPanel 示例之JSON格式Store前后台增删改查

json格式传递数据示例,入口html页面: [xhtml] view plaincopyprint? >   html>       head...
  • caicai1170733165
  • caicai1170733165
  • 2013年06月13日 13:39
  • 830

extjs_04_grid(弹出框&行编辑器 增删改数据)

extjs_03_grid(弹出框&行编辑器 增删改数据) 增加,删除表格记录(弹窗口,适用于表字段比较多); 增加,删除表格记录(行编辑器,适合修改字段少)...
  • adam_zs
  • adam_zs
  • 2014年06月24日 00:10
  • 2374

Extjs中EditorGridPanel修改并获取数据的两种方式

有时候我们hui
  • A123638
  • A123638
  • 2014年08月15日 13:11
  • 3543

extjs form表单 及 后台保存数据

function formEdit(sel, templateid) {//sel     Ext.BLANK_IMAGE_URL = '../../Content/js/ext2/resource...
  • TIANDIZHUSHEN
  • TIANDIZHUSHEN
  • 2014年11月18日 09:47
  • 2330

EXTJs前后台交互

Ajax交互方式 Ext.Ajax.request( { //被用来向服务器发起请求默认的url url : "", //请求时发送后台的参数,既可以是Json对象,也可以直接使用“n...
  • SJF0115
  • SJF0115
  • 2013年05月23日 10:31
  • 10314

Extjs学习------MVC结构的开发(从后台获取数据显示到Grid)

Extjs学习------MVC结构的开发(从后台获取数据显示到Grid) 上次是一个登陆的Form,大概就是从Extjs前台获取数据,提交到后台的Action进行验证,这次是一个从后台...
  • gaoqiao1988
  • gaoqiao1988
  • 2013年06月21日 10:05
  • 1869

前台extjs后台 java poi 读取excel数据到数据库中

extJs的前台部分: 1.定义导出按钮: this.returnJnlImportBtn1 = new Ext.Button({ text : "账户调整前导入", id : "...
  • u010649589
  • u010649589
  • 2016年02月29日 10:15
  • 1338

Extjs分页数据与后台交互

自己就是记记笔记,欢迎讨论,测试通过 1,前端代码 这里最重要的就是::1)路径:url:"role/search.do" 2)配置json数据格式:例如:[{"total":50,"rows":[{...
  • changjh1
  • changjh1
  • 2017年01月13日 15:08
  • 1844

Extjs从后台读取数据的三种方式

1.      使用form表单提交 使用表单提交是调用了表单的submit方法,其配置项包括url、method等。这种方式能够以JSON的形式提交参数信息。 var myform = Ext....
  • qq724432055
  • qq724432055
  • 2018年01月02日 20:39
  • 39
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs EditorGridPanel的使用.(数据从后台读出) asp.net
举报原因:
原因补充:

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