Ext4.1小结

1、创建下拉框：

{
    id:'user',
    xtype:'combo',//下拉框类型
    name:'workPlan.user.id',
    fieldLabel:'测试',
valueField:'id',
displayField:'name',
triggerAction:'all',
queryModel:'local',
    anchor:'90%',
    allowBlank:false,
store:new Ext.data.Store({
proxy:{
type:'ajax',
url:'  ',//下拉框中的数据来源地址
reader:{
type:'json',
root:'items'
}
},
fields:['id','name'],//其中id为valueField ,name为displayField
autoLoad:true
})
    }

2、创建树形表格：

 var tree = Ext.create('Ext.tree.Panel', {
    id: 'workplan',
    layout:'fit',
        height: 300,
        renderTo: 'divworkplan',
        useArrows: true,
        rootVisible: false,
        store: store,
        multiSelect: true,
        columns:[{
    xtype:'treecolumn',
    text:'名称',
    flex:2,
    sortable:true,
    dataIndex:'name'
    },{
    text:'内容',
    flex:1,
    dataIndex:'content'
    },{
    text:'指派给',
    dataIndex:'user'
    },{
    text:'创建时间',
    dataIndex:'createTime'
    },{
    text:'修改时间',
    dataIndex:'modifyTime'
    },{
    text:'开始时间',
    dataIndex:'start'
    },{
    text:'结束时间',
    dataIndex:'end'
    },{
    text:'完成时间',
    dataIndex:'complete'
    },{
    text:'状态',
    dataIndex:'status'
    },{
    text:'描述',
    dataIndex:'desc'
    }],
    tbar:[{
    xtype:'button',
    text:'新增',
    iconCls:'x-button-add',
    handler:function(){
    onAdd();
    }
    },'-',{
    xtype:'button',
    text:'修改',
    iconCls:'x-button-edit',
    handler:function(){
    onEdit();
    }
    },'-',{
    xtype:'button',
    text:'删除',
    iconCls:'x-button-delete',
    handler:function(){
    onDel();
    }
    },'-',{
xtype:'button',
text:'刷新',
iconCls:'x-button-refresh',
handler:function(){
store.load();
}
}],
dockedItems:[{
dock:'bottom',
xtype:'pagingtoolbar',
store:store,
displayInfo:true,
displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
            emptyMsg: "没有数据",
            beforePageText:'第',
            afterPageText:'页/共{0}页'
}]
    });

效果图：

3、直接对下拉框初始化

name:'user.sex',
fieldLabel:'性别:',
xtype:'combo',
store:[['男','男'],['女','女']]

4、得到选中的数据

     var data = tree.getSelectionModel().getSelection();//得到选中的数据结果为数组
    var record = tree.getSelectionModel().getLastSelected();//得到选中的数据的最后一个

5、验证密码框，判断两次输入密码是否一致

//添加密码框的验证
Ext.apply(Ext.form.field.VTypes,{
password:function(val,field){
if(field.initialPassField){
var pwd = field.up('form').down('#' + field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText:'两次密码输入不一致！'
});

密码框：

{inputType:'password',name:'user.password',fieldLabel:'登录密码:',itemId:'password',allowBlank:false},

{inputType:'password',fieldLabel:'确认密码:',allowBlank:false,vtype:'password',initialPassField:'password'}

6、单选框

{xtype:'radiogroup',name:'user.status',fieldLabel:'用户状态',columns:[100,100],vertical:true,
items:[{
boxLabel:'启用',
name:'user.status',
inputValue:'1',
checked:true
},{
boxLabel:'停用',
name:'user.status',
inputValue:'0'
}]
}

7、给树节点添加右键事件

//给树节点添加右键事件监听
listeners:{
'itemcontextmenu':function(view,record,htmlitem,rowIndex,e){
var rightClick = null;
if(!rightClick){
rightClick = new Ext.menu.Menu({
floating:true,
plain:true,
items:[{
text:'添加节点',
iconCls:'x-button-add',
//添加菜单点击事件
handler:function(){

}
},{
text:'删除节点',
iconCls:'x-button-delete',
handler:function(){
del();
}
},{
text:'刷新',
iconCls:'x-button-refresh',
handler:function(){
store.load();
}
}]
});
}
rightClick.showAt(e.getXY());
e.preventDefault();
}
}

8、给树节点添加复选框:添加checked属性。

9、如图实现如下功能：当点击选中左边的复选框时，左边的面板中出现该数据，当取消该复选框时，右边的面板也去掉该数据。

给树节点添加监听事件：

代码：listeners:{
'checkchange':function(node,checked){

//新增一条记录
var record = new images({//images为右边的面板的model名称，menuName，menuId都为其model里的属性
menuName:node.data.text,
menuId:node.data.id
});
if(checked == true){//如果为选中时就将新增的数据插入面板的store中
store.insert(store.getCount(),record);
}else{//反之就将store中的数据移除
for(var i = 0; i<store.getCount();i++){
if(store.getAt(i).get('menuId') == node.data.id){
store.remove(store.getAt(i));
}
}
}
}
}

10、验证用户名是否可用

items : [{

            fieldLabel : '账号',

            name : 'user.username',

            id : 'username',

            allowBlank : false,

            maxLength : 18,

            blankText : '帐号不能为空',

            vtype : "checkname",//checkname与方法名相同

            validationEvent : "blur"

 

        }]

 var temp_response;

    Ext.apply(Ext.form.VTypes, {

        "checkname" : function() {

var username = Ext.getCmp('user').getValue();

            if (username == "") {

                return false;

            }

            Ext.Ajax.request({

                url : 'user!isExistUser',

                async : false,//同步执行

                params : {

                    'user.username' : username

                },

                success : function(_response, _options) {

                    //用户名已经存在为0

                    if(_response.responseText==0){

                        temp_response = true;

                    }else{

                        temp_response = false;

                    }

                     

                }

            });

 

            return temp_response;

 

        },

        "checknameText" : "该用户名已经存在"

    });