Extjs学习笔记3-多功能编辑框

来源：互联网发布：信息的编程加工编辑：程序博客网时间：2024/04/30 13:52

效果图

下拉列表框

日期

checkbox

js代码

Ext.onReady(function(){Ext.create("Ext.data.Store",{ //创建一个store用来初始化panelstoreId:"test",fields:["num","combox","date","boolean"],data:{"items":[{"num":1,"combox":"Alabama","date":new Date(),"boolean":"true"},{"num":1,"combox":"Alabama","date":new Date(),"boolean":"true"},{"num":1,"combox":"Alabama","date":new Date(),"boolean":"true"},{"num":1,"combox":"Alabama","date":new Date(),"boolean":"true"}]},proxy: {        type: 'memory',        reader: {            type: 'json',            root: 'items'        }    }});var comboStore = Ext.create('Ext.data.Store', { //初始化下拉列表框中的数据    fields: ['value', 'text'],    data : [        {"value":"0", "text":"Alabama"},        {"value":"1", "text":"Alaska"},        {"value":"2", "text":"Arizona"}            ]});Ext.create('Ext.grid.Panel', {    title: 'test',    store: Ext.data.StoreManager.lookup('test'),//    columns: [//        { header: '数字',  dataIndex: 'num', field: 'numberfield' ,flex:1},        { header: '下拉列表框', dataIndex:"combox" ,field:{        xtype:"combo",        store:comboStore,        displayField:"text",        valueField:"value",        queryMode:"local"//        renderer:function(){}        },flex:1},        { header: '时间', dataIndex: 'date',field:"datefield" ,flex:4},        {header:"布尔值",dataIndex:"boolean",field:"checkbox",flex:1}    ],    selType: 'cellmodel',    plugins: [        Ext.create('Ext.grid.plugin.CellEditing', {            clicksToEdit: 1        })    ],    height: 200,    width: 800,    renderTo: Ext.getBody()});});

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>MessageBox</title>  <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>      <script type="text/javascript" src="extjs/ext-all.js"></script>      <script type="text/javascript" src="app2.js"></script>          </head>  <body>  </body>  </html>

把js代码写到app2.js中