无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻 > 产业新闻 >

微信小程序页面设计_Extjs让combobox写起来简洁又漂亮

时间:2021-01-12 15:33来源:微信小程序页面设计 作者:jianzhan 点击:
bobox写起來简约又好看 bobox写起來更简易,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下也早已写了好长时间時间的extjs ,bobox,bobox,再度纪录出来,以防放到某
bobox写起来简洁又漂亮       bobox写起来更简单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

也已经写了很久时间的extjs ,bobox,bobox,再次记录下来,以免放在某个地方忘记了找不到了。

定义一个基本的baseCombobox类,如下。

Ext.define('Admin.view.baseCmp.BaseCombobox', {
 extend: 'Ext.form.field.ComboBox',
 xtype: 'baseCombobox',
 editable: false,
 labelSeparator: ':',
 labelWdith: 0,
 triggerAction: 'all',
 labelAlign: 'right',
 //forceSelection: true,此属性操作时,就算去掉文字后,失去焦点后还是会选择上一次选择的记录
 autoSelect: true,
 selectOnfocus: true,
 valueNotFoundText: '',
 name:'',
 queryMode: 'local',
 url:'',
 displayField: '',
 valueField: '',
 requires:['Admin.view.baseCmp.BaseComboboxController'],
 controller: 'baseComboboxController',
 emptyIndex:-1,//自定义属性,空值所在下标,-1则不添加
 selectIndex:0,//自定义属性,自动选择下标
 params:null,//自定义属性,数据参数
 listeners: {
 render: 'getComboData',
 scope: 'controller'

Ext.define('Admin.view.baseCmp.BaseComboboxController', {
 extend: 'Ext.app.ViewController',
 alias: 'controller.baseComboboxController',
 getComboData: function (combo) {
 Ext.Ajax.request({
 url: combo.url,
 method :'POST',
 bo.params,
 success: function (response) {
 var dataJson = Ext.decode(response.responseText);
 if(dataJson.state != 200 || dataJson.data == null || dataJson.data.length == 0)
 //服务器返回错误
 return ;
 var data = dataJson.data;
 //插入“全部”选项
 if(combo.emptyIndex = 0)
 var emp = {};
 bo.displayField] = "全部";
 bo.valueField] = "全部";
 Ext.Array.bo.emptyIndex,[emp]);
 var store = Ext.create('Ext.data.Store', {
 fields: Ext.Object.getKeys(data[0]),
 data: data
 combo.setStore(store);
 //如果指定选中某个值
 if(combo.selectValue != null)
 bo.selectValue);
 else
 //如果指定选中某个下标的值,-1为最后一个, 0 则为第selectIndex个
 if(combo.selectIndex == -1)
 console.log(data.length - 1);
 combo.select(data[data.length - 1][combo.valueField]);
 else
 combo.bo.selectIndex][combo.valueField]);
 //触发选中事件
 //combo.fireEvent('select', combo,bo.selectIndex));
 failure: function (response) {
 //请求服务器失败

调用实例:

 xtype: 'baseCombobox',
 name: "typeName",
 fieldLabel: "类型",
 displayField: 'typeName',
 valueField: 'id',
 emptyIndex:0,
 multiSelect:false,
 url:"/itemType/list",
 listeners:{
 select:'query'
},

 xtype: 'itemTypeCombobox',就可以搞定了,代码看起来简洁又漂亮。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。

(责任编辑:admin)

织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信

在线咨询
联系电话

400-888-8866