Extjs学习笔记3-多功能编辑框_在ext框架里,做了一个编辑框,一共横着有五个输入框,当我点击新增会增加一行,-优快云博客

本文链接：https://blog.youkuaiyun.com/CROSSCI/article/details/7571695

这篇博客展示了如何在ExtJS中创建一个多功能编辑框，包括下拉列表框、日期选择器和复选框的功能。通过js代码和HTML的结合，详细介绍了实现过程，并给出了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

下拉列表框

日期

checkbox

js代码

Ext.onReady(function(){
	Ext.create("Ext.data.Store",{ //创建一个store用来初始化panel
		storeId:"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中