概述

  Extjs弹窗可以分为消息弹窗、对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌套到widget.window,然后随着widget.window的show方法展示到页面上哪?另外一个就是ExtJs中的Combobox下拉控件,如何做到手动输入,自动联想手动输入的内容进行查询?

一、针对自定义弹窗

  通过window显示自定义弹窗,下面有几种方案思路

思路一、直接将gridpandel填充到widget.window对应的Items

  代码如下:

    var InvoiceItemGrid = Ext.create('Ext.grid.Panel', {        forceFit: false,autoHeight: true,autoScroll: true,frame: true,split: false,layout: "fit",height:document.documentElement.clientHeight,margin: 0,store: PrecStore,loadMask: { msg: '数据加载中...' },columnLines: true,//dockedItems: [PTxtInfo],//selType: "checkboxmodel",
        selModel: {mode: "multi",//multi,simple,single;默认为多选multicheckOnly: false,//如果值为true,则只用点击checkbox列才能选中此条记录allowDeselect: true,//如果值true,并且mode值为单选(single)时,可以通过点击checkbox取消对其的选择
        },viewConfig: {stripeRows: true,//在表格中显示斑马线enableTextSelection: true //可以复制单元格文字 "GGXH", "XMSL", "XMDJ", "XMJE", "SL", "SE", "SPBM", "TaxItem"],
        },bbar: { xtype: "pagingtoolbar", inputItemWidth: 100, store: PrecStore, displayInfo: true },columns: [{ text: "Id", width: 80, dataIndex: "Id", hidden: true },          { text: "商品名称", width: 80, dataIndex: "XMMC" },{ text: "单位", width: 80, dataIndex: "DW" },{ text: "规格型号", width: 120, dataIndex: "GGXH" },{ text: "数量", width: 80, dataIndex: "XMSL" },{ text: "项目单价", width: 120, dataIndex: "XMDJ" },{ text: "项目金额", width: 80, dataIndex: "XMJE" },{ text: "税额", width: 80, dataIndex: "SE" },{ text: "税率%", width: 80, dataIndex: "SL" },{ text: "税目编码", width: 160, dataIndex: "SPBM" },]});//主窗体var WindItem= Ext.create('widget.window', {title: '发票明细',closable: true,closeAction: 'hide',modal: true,frame: true,layout: 'fit',width: 895,minWidth: 895,height: 430,layout: {type: 'border',padding: 2},items: [InvoiceItemGrid]});

显示的结果截图如下:

结果分析:grid的标题也没显示出来,而且随着窗体大小的拉伸,内容不会全部显示。

思路二、直接将gridpandel填充到tabpanel的Items中,然后tabpanel放到widget.window对应的Items

代码如下:

    var WindItem= Ext.create('widget.window', {title: '发票明细',closable: true,closeAction: 'hide',modal: true,frame: true,layout: 'fit',width: 895,minWidth: 895,height: 430,layout: {type: 'border',padding: 2},items: [{region: 'center',xtype: 'tabpanel',items: InvoiceItemGrid}]});

显示的结果截图如下:

结果分析:grid上面的那个蓝色方块,是A标签。ExtJs中的tabpanel根据grid自动生成,显然也不是最理想结果;

思路三、直接将gridpandel填充到From的Items中,然后From放到tabpanel的Items中,然后tabpanel放到widget.window对应的Items

代码如下:

var DataFrom = Ext.create('Ext.form.Panel', {hidden: true,bodyPadding: 0,width: 890,header: true,layout: 'fit',defaults: {anchor: '100%'},defaultType: 'textfield',items: [InvoiceItemGrid],buttons: [{text: '关闭',handler: function () {WindItem.close();}}]});var WindItem= Ext.create('widget.window', {title: '发票明细',closable: true,closeAction: 'hide',modal: true,frame: true,layout: 'fit',width: 895,minWidth: 895,height: 430,layout: {type: 'border',padding: 2},items: [{region: 'center',xtype: 'tabpanel',items: DataFrom}]});

显示的结果截图如下:

结果分析:显然这种方式相对更好点,思路3是根据思路2而来,思路2又是根据思路1而来,所以好的思路还是需要不断优化和总结。

二、Combobox手动输入联想加载

  所谓自动联想加载是指Combobox允许手动输入,根据手动输入的内容系统自动加载和输入内容相关联的内容,Combobox设置为可编辑的时候,每次手动输入ExtJs自动回到后台请求数据,传递参数query作为查询内容,实现的效果如下:

手动输入彩电,Combobox下来数据源变动如下

ExtJs代码如下

//定义的数据源
var ProductLine = new Ext.data.Store({fields: ["className", "classID"],autoLoad: true,proxy: {type: "ajax",actionMethods: { read: "POST" },url: '/urlOrderCV/GetAllProductLine',reader: {type: 'json',rootProperty: 'Data',totalProperty: 'TotalCount'}}
});
///定义的下来列表Combobox
{xtype: "combobox",store: ProductLine,displayField: "className",   //显示出来的是name valueField: "classID",       //值是idfieldLabel: "科级名称",     //labeleditable: true,        //不可编辑minChars: 1,id: "classname",           //idlabelWidth: 50,width: 160
}

后台Action的伪代码如下

public ActionResult GetAllProductLine (string query)
{if (string.IsNullOrEmpty(query)){//查询全部}else{//更加query查询部分}
}

转载于:https://www.cnblogs.com/xibei666/p/6220820.html

ExtJs基础知识总结:自定义弹窗和ComboBox自动联想加载(四)相关推荐

  1. pytorch基础知识整理(三)模型保存与加载

    1, torch.save(); troch.load() torch.save()使用python的pickle模块把目标保存到磁盘,可以用来保存模型.张量.字典等,文件后缀名一般用pth或pt或p ...

  2. 新手上路:ADAMS 基础知识讲解(图文并茂)【转载仿真论坛】(四)

    引用 Baker 的 新手上路:ADAMS 基础知识讲解(图文并茂)[转载仿真论坛](四) 14.如何在ADAMS下由数据生成样条曲线? 在tools->command navigator... ...

  3. android 在自定义的listview(有刷新加载项)列表中,数据过少时不能铺满整个屏幕时,header和footer同时显示问题...

    android  在自定义的listview(有刷新加载项)列表中,数据过少时,当刷新时,加载项也会显示,这是很头疼的一个问题,查阅了一些资料,总结了一个比较不错的方法: 原来代码: 1 @Overr ...

  4. 使用MJRefresh自定义下拉刷新,上拉加载动画

    有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现 ...

  5. 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模

    MNProgressHUD 项目地址:maning0303/MNProgressHUD  简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...

  6. ExtJS基础知识总结:常用控件使用方式(一)

    概述 最近一直在做相关ExtJs方面的项目,遇到了ExtJs使用方面的一系列问题,现在将使用技巧做个记录汇总,以便于下次能够快速使用.以下都是ExtJs控件的常用方法,做简单汇总,俗话说,好记星不如烂 ...

  7. 深度学习【使用pytorch实现基础模型、优化算法介绍、数据集的加载】

    文章目录 一 Pytorch完成基础模型 1. Pytorch完成模型常用API 1.1 `nn.Module` 1.2 优化器类 1.3 损失函数 1.4 线性回归完整代码 2. 在GPU上运行代码 ...

  8. 使用自定义的item、Adapter和AsyncTask、第三方开源框架PullToRefresh联合使用实现自定义的下拉列表(从网络加载图片显示在item中的ImageView)...

    AsyncTask使用方法详情:http://www.cnblogs.com/zzw1994/p/4959949.html 下拉开源框架PullToRefresh使用方法和下载详情:http://ww ...

  9. 如何在MyEclipse中添加 用户自定义类库 以及将自定义的类库加入工程的加载目录...

    2019独角兽企业重金招聘Python工程师标准>>> 但真正解决问题的是下面几句而已: 您是不是没有将common.jar文件导入buildPath 如果没有 选中你所在的项目 右 ...

  10. 关于ExtJS通过单击左边的treePanel在居中的panel加载页面问题

    2019独角兽企业重金招聘Python工程师标准>>> 这几天整ExtJS通过单击treePanel在居中的panel加载页面问题.第一次加载的页面正常显示在panel中,但是从第二 ...

最新文章

  1. 区块链技术实现只需180行go代码!
  2. Java动态代理类使用
  3. python中的全局变量和局部变量
  4. 2021高考无准考证成绩查询,2021考研没有准考证号怎么查成绩
  5. php thikn_与ThinkPHP等框架结合
  6. zypper 删除mysql_如何在 Linux 上安装/卸载一个文件中列出的软件包?
  7. 去除tabbar的灰线
  8. oracle中的脱机与联机,使存储池中的设备联机和脱机
  9. C#图解教程 第七章 类和继承
  10. 雷林鹏分享:Lua break 语句
  11. 微信小程序——评论点赞功能
  12. 找出若干个非零数中的最小值以及它们的平均值
  13. TransTrack简述
  14. 图片文字识别软件哪个比较好
  15. PHP 调用百度人脸检测
  16. 服务器游戏列表为空,游戏服务器列表为空
  17. 2023最新大数据毕设选题
  18. 工具小软件——change case
  19. SD/MMC CSD寄存器 V1.0和V2.0详解(如何读写SD/MMC卡)
  20. 容灾数据复制技术的比较

热门文章

  1. 端午节那晚,见了个小学时的同学!
  2. AAAI'22 | 预训练中的多模态信息融合与表征探究
  3. 【损失函数】一文弄懂各种loss function
  4. 【NER】命名实体识别:详解BiLSTM_CRF_Pytorch_Tutorial代码
  5. 【学术】让你的博士经历更加轻松愉快的10个tips
  6. pytorch_LSTM预测股票行情
  7. 每日算法系列【LeetCode 121】买卖股票的最佳时机
  8. 机器学习—XGBoost常见问题解析
  9. 奔跑吧,骏马!——跑步类动画设计动态分析
  10. 二十一天学通C++之使用try/catch捕获异常