Ext常见使用问题记录

Ext4.2 使用技巧与常见问题解决方案

最新推荐文章于 2021-02-04 16:12:40 发布

原创最新推荐文章于 2021-02-04 16:12:40 发布 · 769 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext

Ext 专栏收录该内容

17 篇文章

订阅专栏

本文记录了Ext4.2中的一些常见使用问题及其解决方法，包括LoadMask防止重复提交、遮罩效果、Ext Alert提示、Ext.Msg.show的使用、表单输入框、时间选择框、密码框、动态下拉框等组件的配置，以及一些常见的表单验证和界面交互操作。通过这些实例，可以帮助开发者更好地理解和应用ExtJS。

Ext4.2

在线文档地址

http://tool.oschina.net/apidocs/apidoc?api=extjs4.1%2Fdocs%2Findex.html%23%21%2Fapi

LoadMask防止重复提交：

var myMask = new Ext.LoadMask(Ext.getCmp(XXX).body, {msg:"请稍等。。。"});

myMask.show();

myMask.hide();

var myMask0 = new Ext.LoadMask(Ext.getDom("XXX"), {

msg: '正在加载请稍等！',

removeMask: true

});

myMask0.show();

myMask0.hide();

遮罩效果：

点击修改弹出修改的window，但是没有遮罩，可以继续点击window框后的修改，再次点击修改，原已经弹出的window框内数据直接消失卡死，点击关闭之后还是卡死状态。

需要添加一个属性

modal:true,//设置是否添加遮罩即可

Ext Alert 提示：

Ext.Msg.alert("提示", reslut.msg);

Ext.Msg.show是否

Ext.Msg.show({

                         title:'请确认是否继续操作',

                         msg: '您当前选择的与其他单位的选项有冲突,请确认是否继续操作',

                         buttons: Ext.Msg.YESNO,

                         //icon: Ext.Msg.QUESTION

                             fn: function (b) {

                                 if(b =='yes'){

                                Ext.Msg.alert("提示", b);

                                 }

                             }

                      });

ExtJS学习------Ext.Msg.show()学习:https://blog.youkuaiyun.com/ranzhifa_2008/article/details/8543429

Ext getCmp()常用：

Ext.getCmp("XXX")

Ext.getCmp(XXX).getSelectionModel().getSelection();

Ext.getCmp("XXX").getForm()

Ext.getCmp("XXX ").value

Ext.getCmp("XXX ").disable();

Ext.getCmp("XXX").enable();

Ext.getCmp('XXX').show();

Ext.getCmp('XXX').hide();

表单输入框

        var XXX = new Ext.form.TextField({
		fieldLabel : 'XXX',
		width : 150,
		emptyText : '请输入...',
		maxLength : 200,
		maxLengthText : '长度限于200个字符以内',
		regexText : '请输入名称',
		listeners : {}
	});

时间选择框datefield

{

 xtype: 'datefield',

 anchor: '100%',

 fieldLabel : '开始起始时间',

 labelWidth: 115,

 id: 'STime1',

 //format : "Y-m-d H:i:s",

 format : "Y-m-d",

 maxValue : new Date()

}

Ext密码框

{

 xtype: 'textfield',

 name: 'password',

 inputType: 'password',

 fieldLabel: '用户密码',

 validator: function (value) {

 if (user == '') {

 if (!regex.test(value)) {

 return '密码中必须包含字母、数字、特殊字 符，至少8个字符，最多30个字符！';

 }

 } else {

 if (value != null && value != '' && !regex.test(value)) {

 return '密码中必须包含字母、数字、特殊字 符，至少8个字符，最多30个字符！';

 }

 }

 return true;

 },

 width: 250,

 labelWidth: 80,

 x: 10,

 y: 70

},

Ext弹出 –固定 combo

var states = Ext.create('Ext.data.Store', {

           fields: ['id','name'],

           data : [

               {"id":"1","name":"是"},

               {"id":"0","name":"否"}

           ]

});

var updatePanel = Ext.create('Ext.form.Panel', {

              frame: false,

              autoHeight: true,

              bodyStyle: 'padding: 10px 10px 0 10px;',

              labelWidth: 50,

              border:false,

              defaults: {

                  anchor: '95%',

                  allowBlank: false,

                  msgTarget: 'side'

              },

              items: [{

                  xtype:'combo',

                  id:'update_vip',

                fieldLabel: 'vip',

                  store: states,

                  displayField: 'name'

                  ,valueField: 'id',

                  value : vip

              }]

          });

或

XXX= new Ext.form.ComboBox({
        fieldLabel: '是否XXX',
        store : [['', "全部"], ['0', "是"], ['1', "否"]],
        mode: 'local',
        displayField: 'name',
        valueField: 'id',
        emptyText : '请选择...',
        triggerAction : 'all',
        editable : false,
        listeners : {}
   });

动态下拉框combo

{

 xtype: “combo”,

 id: “XXX”,

 fieldLabel: “Lable”,

 editable: false,

 allowBlank: true,

 displayField: “name”,

 valueField: “id”,

 store: Ext.create(“Ext.data.Store”, {

 fields: [‘id’, ‘name’],

 proxy: {

 type: “ajax”,

 url: “../XXX/getXXXList”,

 extraParams : {},

 reader : new Ext.data.JsonReader({},

 [‘id’,’name’]

 ),

 },

 autoLoad: true,

 listeners: {

 load: function() { }

 }

 }),

 width: 250,

 labelWidth: 80,

 value: “”,

 listeners : {

 select : function() {}

 }

}

        var store = new Ext.data.Store({
		proxy:new Ext.data.HttpProxy({
			url : '/XXXX/XXXX/XXX.do'
		}),
		reader:new Ext.data.JsonReader({
			idProporty : 'id'
		},[{name : 'id',type:'int',mapping:'ID'},
		{name:'name',type:'string',mapping:'NAME'}]),
		autoLoad : true
	});

	var name = new Ext.form.ComboBox({
	    fieldLabel: 'XXX',
	    store: companStore,
	    mode: 'local',
	    displayField: 'name',
	    valueField: 'id',
	    emptyText : '请选择...',
	    triggerAction : 'all',
	    editable : false,
        listeners : {}
	});

Ext横向滚动条不显示

检查发现因为 forceFit : true, 导致的。

forceFit是使列强制适应grid的总宽度，把forceFit:true这个属性去掉就行了。

Ext关闭弹出窗口

Ext.getCmp("XXX").close();

Ext按钮的显示隐藏

Ext.getCmp('按钮id').show();显示

Ext.getCmp('按钮id').hide();隐藏

方法1：可以在定义bbar的按钮时直接给属性，hidden : true 属性,可隐藏；disabled : true 属性,可禁用

方法2：给按钮添加id，比如id:'btn'；然后在panel的事件中调用Ext.getCmp('btn').disable();禁用或Ext.getCmp('btn').enable();开启。Ext.getCmp('btn').setVisible (false);隐藏或Ext.getCmp('btn').setVisible (true);显示。方法1比较固定，方法2比较灵活