ext.js、grid（分页、菜单、列表）

最新推荐文章于 2023-04-18 21:25:34 发布

zora sweet

最新推荐文章于 2023-04-18 21:25:34 发布

阅读量871

点赞数

分类专栏：前端 ext.js

本文链接：https://blog.youkuaiyun.com/qq_43251202/article/details/93717173

版权

本文介绍如何在Ext.js中构建Grid面板，包括菜单、列表和分页功能。Grid的数据处理由Store和Proxy负责。开发工具选用ibuilder和notepad++，通过将grid分为菜单、列表和分页三个部分进行编写。菜单、列和分页在Ext.js中的配置项分别为tbar、columns和dockedItems，每个部分需根据文档定义相应字段和按钮。示例代码分享以供参考。

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

Grid Panel 仅仅用来展现数据，数据的获取和保存交给使用Proxy的 Store来处理；不知道大家都是用什么软件来写的哈；我用的是ibuilder和notepad++来修改代码；这个层级看的特别的清楚；先说一下grid页面怎么写！
我在写grid的时候一般都会将它分为3个部分；首先是menu菜单；然后是列表；在之后就是分页；grid下面菜、单列、表数据都是平级的；在ext.js中；每一部分起的名字也很重要！列表的名字叫columns；分页的名字叫dockeditems;菜单的名字叫tbar；
这些名字是创建的文件夹的名字；里面就可以写相对应的字段、按钮等~每个的名字都不一样需要按照文档的来写。

在这里插入图片描述

Ext.define("Flowup",{
   extend:"Ext.panel.Panel",initComponent : function() 
//整个页面最外面panel面板
{
    var me = this; me.store=Ext.create("Flowup.Store");Ext.apply(this,{
   i:"Flowup",layout:"vbox",items: [{
   xtype:"form",i:"Flowup.items.form",layout:"column",defaults:{
   
	labelWidth: 60,
	labelAlign: "right",
	columnWidth: 0.25,
	margin: "10 5 5 5"
}
//defaults里面写的样式；frame为 Panel 填充画面（就是页面变成蓝色）,layout是布局我最外面用的是vbox布局（此布局允许元素以垂直方式分布）
,width:"100%",frame:"true",height:130,buttons: 
//xtype是属性的名字；i是文件夹里的名字iconCls是button里面的图标名字；listeners添加一个点击事件
[{
   xtype:"button",i:"Flowup.items.form.buttons.Seek",layout:"column",defaults:{
   margin: "10 5 5 5"},text:"查询",iconCls:"seek",listeners:{
   click:function (_me) {
   
	var form = _me.up("form");
	var searchValues = form.getForm().getValues();
	Ext.apply(me.store.proxy.extraParams, searchValues);
	me.store.removeAll();
	me.store.loadPage(1);
 }
} },{
   xtype:"button",i:"Flowup.items.form.buttons.Delete",layout:"column",defaults:{
   margin: "10 5 5 5"},text:"重置",iconCls:"clear" }],items: [{
   xtype:"datefield",i:"Flowup.items.form.items.Dict",layout:"column",defaults:{
   margin: "10 5 5 5"},fieldLabel:"开始时间",name:"sdate",value:new Date() },{
   xtype:"datefield",i:"Flowup.items.form.items.Edate",layout:"column",defaults:{
   margin: "10 5 5 5"},fieldLabel:"结束时间",name:"edate",value:new Date() },
//editable是让下拉框不能点击输入；combobox是下拉框属性；fieldLabel：显示名字；displayField：从表单导入数据展示一个值，valuefield是相关的数据值名称绑定到ComboBox（下拉框）；
{
   xtype:"combobox",i:"Flowup.items.form.items.Mode",layout:"column",defaults:{
   margin: "10 5 5 5"},editable:false,fieldLabel:"跟进方式",name:"mode",displayField:"name",store:Ext.create("Ext.data.Store", {
   
	fields: ["name", "value"],
	autoLoad: true,
	proxy: {
   
		type: "ajax",
			url: "basis/system/DictionaryService/getByParent?parent=客户管理|跟进方式",
		reader: {
   
			type: "json",
			root: "data"
		}
	}
})
,valueField:"value" },{
   xtype:"combobox"