您的位置：首页 > Web前端 > JavaScript

EXTJS4.0.7开发积累（8）

2016-07-20 23:37 357 查看
EXTJS4.0.7开发积累

有从网络上搜索到的资源，也有自己开发中的总结，侵权告知删除！

panel嵌套到tab嵌套到tab中的panel，如无必要尽量不要设置id/itemId之类的属性，特别是设置了itemId后会造成id重复的错误

//    id:'usereditID',

//   itemId:'logicsysxpanel',
[Ljava.lang.String解释

[表示一维数组[[表示二维数组L表示对象

System.out.println(String[].class);    [Ljava.lang.String;

System.out.println(String.class);      java.lang.String
String.subString

Stringold_string="1#Logicsys_1_tbl_1";

Stringtmp=old_string.substring(0, old_string.indexOf('#'));

System.out.println("returnValue.size:"+tmp);

returnValue.size:1
grid选定某行grid.getSelectionModel().select(rowIndex);

其中，rowIndex是行号（在actioncolumn的处理函数里面添加，点击了action按钮后，就一道选中了该记录，标识所操作的记录）
函数调用的scope问题

（外部函数可以直接调用this指代触发自己的控件本身）		Ext.define('DM.view.authorityGrp.AuthGrpAdd', {});中有如下按钮并绑定事件处理函数：
{
xtype:'button',
text: 'add'
,handler:userListAddHandler
,margin: '0 2 0 0'
}

其中，userListAddHandler是外部函数（在Ext.define('DM.view.authorityGrp.AuthGrpAdd', {})之外定义）

function userListAddHandler(button){

    var me=this;

}

在这个函数中，可以直接调用this指代button本身
Form取值问题view.down('form').loadRecord(rec);

        console.info('is valueunique:'+view.down('#page_block_label').getValue());

只有在form执行完loadRecord后，下面的console才能获得值的。在form里面的afterrender等事件中是取不到值的，因为那时还没有loadRecord。
Down使用注意win.parentwindow.down('#compts_id').getValue()

其中parentwindow是一个Ext.window.Window，里面嵌套了form，compts_id是form里面的textfield控件，可以从window直接down到compts_id而不必如下：

Win.parentwindow.down(‘form’).down('#compts_id').getValue()
Down使用注意

Combobox的update显示问题		win.parentwindow.down('#compts_id').getValue()

其中parentwindow是一个Ext.window.Window，里面嵌套了form，compts_id是form里面的textfield控件，可以从window直接down到compts_id而不必如下：

Win.parentwindow.down(‘form’).down('#compts_id').getValue()

{
xtype:'combobox',
itemId: 'compts_allowBlank',
fieldLabel:'输入值不可空',
value:eval(this.parentwindow.down('#compts_allowBlank').getValue()),
emptyText:'选择...',
triggerAction:'all',
allowBlank: false
,store: trueorfalse
,forceSelection: true
,editable: false
,queryMode: 'local'
,displayField: 'name'
,valueField: 'abbr'

}

其中：this.parentwindow.down('#compts_allowBlank').getValue()是父亲窗口获得的值，console.info时也得到false，但不能正确显示在combobox中（为空，校验失败），添加eval后正常显示。
Form的子控件添加方法initComponent: function() {
this.items = [
{
 xtype: 'form',
 plain: true,
 frame: true,
 border: 0,
 bodyPadding: 5,
 defaults: {
 layout: 'anchor',
 anchor: '100%',
 labelAlign:'right'
 },
}
];
this.on('afterrender',function(){
if(this.parentwindow.down('#compts_id').getValue()==1){
this.down('form').add(
[
{
xtype:'numberfield',
fieldLabel:'输入最小长度',
itemId:'compts_minLength',
maxValue:36,
minValue:1,
allowBlank:false
,value:this.parentwindow.down('#compts_minLength').getValue()
}
,{
xtype:'textfield',
fieldLabel:'过短提示',
itemId:'compts_minLengthText',
allowBlank:false,
value:this.parentwindow.down('#compts_minLengthText').getValue()
}
]
);
}else if(this.parentwindow.down('#compts_id').getValue()==2){
this.down('form').add(
[
{
xtype:'textfield',
fieldLabel:'显示内容',
itemId:'compts_value',
allowBlank:false,
value:this.parentwindow.down('#compts_value').getValue()
}
]
);

         }
});
this.callParent(arguments);

}
labelAlignFieldlabel对其方式，有top、left、right三种方式，left默认。

defaults: {
layout: 'anchor',
anchor: '100%',
labelAlign:'right'

},

或者在form里面：

fieldDefaults: {
labelAlign: "right"

},
Ext.window.Window的父window和子window之间的值传递方法Ext.widget('comptspopupcreate',{parentwindow:button.up('window')});

其中'comptspopupcreate'是子windows，parentwindow是父window，如此就可以在子window中访问和修改父window的值了
hbox布局界面中，两个控件中间的空白地带总是比其他的宽，可以使用如下的方法去掉：

添加magin配置：		{
xtype: 'fieldcontainer',
fieldLabel: '是否唯一',
itemId:'unique_set',
margin: '0 0 0 0',
layout: 'hbox',
items: [
{
xtype:”button”,
text:’按钮’
}
]

}
hbox布局界面中，两个控件中间的空白地带总是比其他的宽，可以使用如下的方法去掉：

添加magin配置：margin: '0 0 0 0'

Action返回Json中的list是完整的多字段对象，但在创建store时，可以只截取其中的一部分有用字段（比如例子中只截取了3个字段）		store: Ext.create('Ext.data.Store', {
fields: ['id', 'user_def_name','widget_name'],
autoLoad:true,
proxy: {
type: 'ajax',
api: {
read    : 'get_west_region_menu.action'
},
reader: {
type: 'json',
root: 'list'
}
}

})
Calendar和Date的转化(1) Calendar转化为Date

Calendarcal=Calendar.getInstance();

Datedate=cal.getTime();

　

(2) Date转化为Calendar

Date date=newDate();

Calendarcal=Calendar.getInstance();

cal.setTime(date);

New Date()到字符串的比较system.out.println((newDate()).toString());

Wed Sep 17 22:41:54 CST 2014

　

system.out.println((newDate()).toLocaleString());

2014/9/17 22:42

　

system.out.println((newDate()).toLocaleString());

Sep 2014 14:44:24 GMT
Mysql的tinyint类型存储 表有字段userType，类型tinyint，到了数据库里面存储为tinyint(4)。
Mysql的boolean类型存储表有字段status，类型boolean，到了数据库里面存储为tinyint(1)。0代表false，1代表true。

数据库中查询的时候，可以使用如下：

sb.append("select new map(l.id as id,l.logicSysName as logicSysName) from LogicSys l ");

        sb.append(" where l.status > 0");

        sb.append(" order by l.logicSysName ");
store的创建方法比较

【学习新的好方法，可以省掉很多臭汗】

方法一：

         Ext.Ajax.request({

                url:'getAllLogicSysList.action',

                success:function(resp,opts) {

                 var respText = Ext.JSON.decode(resp.responseText);

                    var logicsysList=respText.list;

                    

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

                        fields: [

                            {type: 'string', name: 'logicSysName'},

                            {type: 'long', name: 'id'}

                        ]

                    });

                    for(var i in logicsysList){

                     logic_sys_store_before_login.add({logicSysName:logicsysList[i].logicSysName,id:logicsysList[i].id});

                        console.info("logicSysName:"+logicsysList[i].logicSysName);

                        console.info("id:"+logicsysList[i].id);

                    }

                    Ext.apply(me.down('#logic_sys_combobox').store,logic_sys_store_before_login);

                }

         });

方法二：

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

          fields: [

              {type: 'string', name: 'logicSysName'},

              {type: 'long', name: 'id'}

          ],

          proxy: {

              type: 'ajax',

//              url:'getAllLogicSysList.action',

              api: {

                  read    : 'getAllLogicSysList.action'

              },

              reader: {

                  type: 'json',

                  root: 'list'

              }

          }

          });

        Ext.apply(me.down('#logic_sys_combobox').store,logic_sys_store_before_login);

        logic_sys_store_before_login.load();

其中方法二也可以用把：

api: {

                  read    : 'getAllLogicSysList.action'

              },

去掉，而采用：

url:'getAllLogicSysList.action'

的写法；

不要store create的时候直接为store执行load方法，要不在页面上虽然显示了数据列表，但不能显示选中值。最好单独执行：

logic_sys_store_before_login.load();

方法三：（方法一、方法二都是在afterrender事件中执行的，方法三的创建方法和afterrender无关）

initComponent: function() {

      Ext.apply(this, {

             items: this.createView()

      });

         this.addEvents(

                 'feedselect'

             );

        this.callParent();

    },

    createView: function(){

        this.view = Ext.create('widget.dataview', {

            store: Ext.create('Ext.data.Store', {

             fields: ['id', 'user_def_name','widget_name'],

             autoLoad:true,

             proxy: {

                    type: 'ajax',

                    api: {

                        read    : 'get_west_region_menu.action'

                    },

                    reader: {

                        type: 'json',

                        root: 'list'

                    }

                }

            }),

            selModel: {

                mode: 'SINGLE',

                listeners: {

                    scope: this,

                    selectionchange: this.onSelectionChange

                }

            },

            listeners: {

                scope: this,

                contextmenu: this.onContextMenu,

//                viewready: this.onViewReady

            },

            trackOver: true,

            cls: 'feed-list',

            itemSelector: '.feed-list-item',

            overItemCls: 'feed-list-item-hover',

            tpl: '<tpl for="."><div class="feed-list-item">{user_def_name}</div></tpl>'

        });

        return this.view;

}

注意：在这个方法中，如果没有“autoLoad:true”，数据不会加载，有了才会自动加载。
Extjs4.0.7的checkbox bug保存的时候需要单独设置该值，否则后台得不到该值：

var values = form.getValues();

record.set(values);

record.set('status',form.getComponent('usernamecontainer').down('#statusCheckbox').getValue());
后台有5-8个字段，但我查询的时候只需要其中的2个字段：id、name，其他的不仅没有用也不想暴露出来。根据返回值，在前台组装成combobox的storethis.on('afterrender',function(){
var me=this;
//获得逻辑系统列表
Ext.Ajax.request({
url:'getAllLogicSysList.action',
success:function(resp,opts) {
var respText = Ext.JSON.decode(resp.responseText);
var logicsysList=respText.list;

var logic_sys_store_before_login = Ext.create('Ext.data.Store', {
fields: [
{type: 'string', name: 'logicSysName'},
{type: 'long', name: 'id'}
]
});
//                    tbls_store.removeAll();
for(var i in logicsysList){
logic_sys_store_before_login.add({logicSysName:logicsysList[i].logicSysName,id:logicsysList[i].id});
console.info("logicSysName:"+logicsysList[i].logicSysName);
console.info("id:"+logicsysList[i].id);
}
Ext.apply(me.down('#logic_sys_combobox').store,logic_sys_store_before_login);
}
});

});

一、其中logic_sys_store_before_login.add({logicSysName:logicsysList[i].logicSysName,id:logicsysList[i].id});代码对应后台DAO的如下hql语句：select new map(l.id as id,l.logicSysName as logicSysName) from LogicSys l

　

二、其中logic_sys_store_before_login.add({logicSysName:logicsysList[i][1],id:logicsysList[i][0]});代码对应后台DAO的如下hql语句：select l.id,l.logicSysName from LogicSys l
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  extjs4 开发积累
相关文章推荐
新的分享
章节导航