Extjs-lesson4

❝小闫语录:很有意思的是,本来有一块糖的你很幸福,但看到别人有十块糖的时,你的幸福会荡然无存。那么决定你幸福的是什么呢? ❞

Ext.js 系列课程笔记「表单子项」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

1.TextField

1.1 展示

TextField

1.2 代码

❝窗体 Window 以及表单 FormPanel 的代码省略,以后的代码将只展示必要部分。 ❞

// 初始化提示信息,让下面的框框显示提示动作
Ext.QuickTips.init();
// 提示的方式在框框右边缘,参数的值有:"qtip","title","under","side",id(元素id)
// side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示。
Ext.form.Field.prototype.msgTarget = "side";
// 用户名
// 创建一个新的TextField文本框对象
var txtusername = new Ext.form.TextField({
  // 宽
  width: 140,
  // 不允许文本框为空
  allowBlank: false,
  // 文本框的最大长度为 20 个字符;超过 20 个字符仍然可以输入,但会有警告信息
  maxLength: 20,
  // 该 TextField 的名称
  name: "username",
  // 文本框前面显示的文字
  fieldLabel: "用户名称",
  // 当非空校验没有通过时的提示信息
  blankText: "请输入用户名",
  // 当最大长度校验没有通过时的提示信息
  maxLengthText: "用户名不能超过20个字符"
});
// 密码input
// 创建一个新的TextField文本框对象
var txtpassword = new Ext.form.TextField({
  width: 140,
  allowBlank: false,
  maxLength: 20,
  // 字段类型,默认是 text,填写为 password 时密码会加密显示
  inputType: "password",
  name: "password",
  fieldLabel: "密码",
  blankText: "请输入密码",
  maxLengthText: "密码不能超过20个字符"
});

2.Button

2.1 展示

Button

2.2 代码

//提交按钮处理方法
var btnsubmitclick = function() {
  Ext.MessageBox.alert("提示", "你点了确定按钮!");
};
//重置按钮"点击时"处理方法
var btnresetclick = function() {
  Ext.MessageBox.alert("提示", "你点了重置按钮!");
};
//重置按钮"鼠标悬停"处理方法
var btnresetmouseover = function() {
  Ext.MessageBox.alert("提示", "你鼠标悬停在重置按钮之上!");
};
//提交按钮
//创建一个新的Button按钮对象
var btnsubmit = new Ext.Button({
  text: "提交",
  //当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。
  handler: btnsubmitclick
});
//重置按钮
//创建一个新的Button按钮对象
var btnreset = new Ext.Button({
  text: "重置",
  //事件监听,按顺序执行。填写格式:事件名: 处理函数
  listeners: {
    //鼠标悬停时执行方法btnresetmouseover
    mouseover: btnresetmouseover,
    //当用户点击的时候[即js中的onclick事件]执行方法btnresetclick
    click: btnresetclick
  }
});

handler 是一个特殊的 listeners ,执行的是首发事件。更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 ❞

3.NumberField

3.1 展示

NumberField

3.2 代码

//创建一个NumberField数字文本框对象
var numberfield = new Ext.form.NumberField({
  //文本框前面的显示文字(标签)
  fieldLabel: "身高",
  //宽度
  width: 80,
  //设置小数点后面的位数,当位数超过时系统会自动截断
  decimalPrecision: 1,
  //设置数字文本框最小值
  minValue: 0.01,
  //设置数字文本框最大值
  maxValue: 200,
  //这个是自己添加的属性,属性添加可以参看重写文本框部分代码
  unitText: " cm",
  //不允许为空
  allowBlank: false,
  //如果校验为空时的提示文字
  blankText: "请输入身高"
});

3.2.1 重写文本框

//重写Ext.form.TextField这个类
Ext.override(Ext.form.TextField, {
  unitText: '',
  //重写 onRender 方法
  onRender: function (ct, position) {
    Ext.form.TextField.superclass.onRender.call(this, ct, position);
    // 如果单位字符串已定义 则在后方增加单位对象
    if (this.unitText != '') {
      this.unitEl = ct.createChild({
        tag: 'div',
        html: this.unitText
      });
      // 在样式表中加了样式"x-form-unit"。
      this.unitEl.addClass('x-form-unit');
      // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况
      this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
      // 同时修改错误提示图标的位置
      this.alignErrorIcon = function () {
        this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
      };
    }
  }
});

4.Hidden

❝毕竟是隐藏字段,顾名思义不可见,因此无展示图例 ❞

4.1 代码

//新建一个Hidden隐藏字段对象
var hiddenfield = new Ext.form.Hidden({
  //名称,后端收到的信息为 userid: 1
  name: "userid",
  //值
  value: "1"
});

5.DateField

5.1 展示

DateField

5.2 代码

//新建一个 DateField 日期字段对象
var datefield = new Ext.form.DateField({
  //文本框前方显示文字(标签)
  fieldLabel: "出生日期",
  //日期显示格式
  format: "Y-m-d",
  //是否可编辑
  editable: false,
  //是否可以为空
  allowBlank: false,
  //校验为空时提示信息
  blankText: "请选择日期"
});

6.RadioGroup

6.1 展示

单选组

6.2 代码

//创建一个RadioGroup对象
var radiogroup = new Ext.form.RadioGroup({
  //单选框前面的显示文字信息
  fieldLabel: "性别",
  //宽度
  width: 100,
  items: [
    {
      //这个属性是设置单选的关键
      //只有同一组 name 的单选按钮才能单选
      name: "sex",
      //单选框的值
      inputValue: "0",
      //单选框的文字说明
      boxLabel: "男",
      //默认勾选男,哪个选项默认勾选,就在哪个选项中添加此属性
      checked: true
    },
    {
      //与上方 name 设置一致
      name: "sex",
      //单选框的值
      inputValue: "1",
      //单选框的文字说明
      boxLabel: "女"
    }
  ]
});
//获取单选组的值
radiogroup.on("change", function(rdgroup, checked) {
  //获取单选框的选中值
  alert(checked.getRawValue());
});

7.CheckBoxGroup

7.1 展示

复选组

7.2 代码

//创建一个复选组的对象
var checkboxgroup = new Ext.form.CheckboxGroup({
  //复选组前文字提示信息
  fieldLabel: "兴趣爱好",
  //宽度
  width: 170,
  //元素
  items: [
    {
      //选择框的文字说明
      boxLabel: "抽烟",
      //选择框的值
      inputValue: "0"
    },
    {
      //选择框的文字说明
      boxLabel: "喝酒",
      //选择框的值
      inputValue: "1"
    },
    {
      //选择框的文字说明
      boxLabel: "烫头",
      //选择框的值
      inputValue: "2"
    }
  ]
});
//获取复选组的值
checkboxgroup.on("change", function(cbgroup, checked) {
  //因为是多选,所以需要循环取出所有勾选的值
  for (var i = 0; i < checked.length; i++) {
    alert(checked[i].getRawValue());
  }
});

8.Combobox

8.1 展示

Combobox

8.2 代码

Ext.js2.3 中没有 ArrayStore ,我们使用 Store 替代更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 ❞

//创建数据源[数组数据源]
var combostore = new Ext.data.Store({
  // 数据本身,数组
  data: [
    [1, "团员"],
    [2, "党员"],
    [3, "其他"]
  ],
  // 从上面数组中读取数据时,字段与数据一一对应解释为 Extjs 使用的数据
  // 参数为 id 列,以及其他各个字段的名称
  reader: new Ext.data.ArrayReader({ id: "id" }, ["id", "name"])
});
//创建Combobox
var combobox = new Ext.form.ComboBox({
  //下拉框前的提示文字信息
  fieldLabel: "政治面貌",
  //数据源;此属性必填
  store: combostore,
  //显示的列,对应数据源的 name 列;此属性必填
  displayField: "name",
  //对应数据源中 id 列的值;此属性必填
  valueField: "id",
  //请设置为”all”,否则默认为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项。而 all 则每次都显示全部
  triggerAction: "all",
  //未填时显示的提示信息
  emptyText: "请选择...",
  //不允许为空
  allowBlank: false,
  //校验为空时提示信息
  blankText: "请选择政治面貌",
  //不可编辑
  editable: false,
  //指定数据源为本地数据源,如果是本地创建的数据源,该属性也是必须的
  //设置为'remote'表示数据源来自于服务器
  mode: "local"
});
//Combobox获取值
//选择时alert出下拉列表的值
combobox.on("select", function() {
  alert(combobox.getValue());
});

本文分享自微信公众号 - 全栈技术精选(Pythonnote),作者:小闫同学啊

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Docker安装FastDFS

    链接:https://pan.baidu.com/s/1tB0Pk9NAeeyuKXOSkgVuwQ

    小闫同学啊
  • Extjs-lesson6

    「效果」:将页面分为了上下左右和中间几个位置更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

    小闫同学啊
  • python趣味玩法

    Always make a total effort, even when the odds are against you.

    小闫同学啊
  • Java微信公众平台开发(七)--多媒体消息回复之图片回复

    之前我们在做消息回复的时候我们对回复的消息简单做了分类,前面也有讲述如何回复【普通消息类型消息】,这里将讲述多媒体消息的回复方法,【多媒体消息】包含回复图片消息...

    用户2417870
  • Flutter 学习记3 - Widget 框架

    通过 widgets 构建 UI,描述当前的配置和状态,当状态改变时,框架找出前后的变化,以确定底层 Render Tree 要做的最小更改,在内部变成另一个状...

    七适散人
  • Netty入门学习系列--helloworld服务端(一)

    public class NettyServerHandle extends ChannelInboundHandlerAdapter {

    用户1257393
  • 从NIO到Netty开发

    Java高级架构
  • 【Swift开发必备Tip】:将protocol 的方法声明为mutating

    一年一度的WWDC,对全球苹果开发者而言,仿佛久旱甘露——之前充满躁动,过程酣畅淋漓,过后满目清新。一个个让人眼前一亮的热点中,最不容易被开发者遗漏的,莫过于苹...

    博文视点Broadview
  • 利用HttpURLConnection发送请求

    每个 HttpURLConnection实例都可用于生成单个请求,但是其他实例可以透明地共享连接到 HTTP 服务器的基础网络。请求后在 HttpURLConn...

    Jack Chen
  • 具体聊一聊简单工厂模式、工厂方法模式和抽象工厂模式

    ​ 通过上面的描述我们可以通过一个基类来创建多个子类,然后实现相应的方法,最后调用基类中的方法(工厂方法)来返回某个子类实例,并加以运用。这...

    Dream城堡

扫码关注云+社区

领取腾讯云代金券