sencha architect3构建web应用程序

使用Data UI Builder生成基础页面

数据仓库Store配置

• autoSync=true
• remoteFilter=true
• remoteSort=true

注册write事件

Ext.Msg.alert('来自服务器的响应', operation.getResultSet().message);

数据代理Proxy配置

• paramsAsJson=true

设置actionMethods

    actionMethods: {
                    create: 'POST',
                    read: 'POST',
                    update: 'POST',
                    destroy: 'POST'
                }

设置api

api: {
                    read: '/hlt/ws/self/business/detail/list',
                    create: '/hlt/ws/self/business/add',
                    update: '/hlt/ws/self/business/update',
                    destroy: '/hlt/ws/self/business/delete'
                }

注册exception事件

var reader = proxy.getReader(),
raw    = reader.rawData;
Ext.Msg.alert('来自服务器的响应', reader.getMessage(raw));
 //store.reload();
Ext.StoreManager.lookup('EnterprisePriorityQualifications').load();

添加Reader

• rootDataProperty=data
• messageProperty=message

视图配置

• 调整数据表格面板的flex为2
• 分别调整数据表格、预览和表单面板的字段显示顺序
• 数据表格面板为字段添加过滤器
• 删除编辑表单的title属性
• 添加checkbox selection model
• 添加pagging tool bar
• 清除表单保存按钮的formBind属性
• display collapsible=true
• display collapseMode=mini
• details autoScroll: true
• form autoScroll: true

ViewController配置

在save事件中清除记录的id

     if (record.phantom) {
                delete record.data.id;
                // Add to store
                store.add(record);
            }

在remove事件中选择所有的行

     var records = me.getReferences().list.getSelection(),
     store = Ext.StoreManager.lookup('your store name');
        // Delete record from store
        store.remove(records);

在add和edit事件中设置display组件的标题

     this.getReferences().display.setTitle('your title');

• 为数据表格面板添加added事件加载数据源
• 添加权限数据
• 设置按钮权限码
• 控制视图状态
• 配置表格列记忆

参考代码

表格行右键菜单(绑定 gridpanel rowcontextmenu 事件)

var me = this;
var purchaseId = me.getViewModel().get('record').data.id;
var items = new Array();

if (me.getReferences().list.getSelection().length == 1) {
    Ext.Ajax.request({
        url: '/hlt/ws/sys/privilege/check/PG_HUOPINKU/PCM_SHANGCHUANLOGO',
        async: false,
        success: function(response) {
            if (Ext.JSON.decode(response.responseText).data)
                items.push({
                    text: '上传Logo',
                    handler: function() {
                        if (!Ext.getCmp('imageuploadwindow'))
                            Ext.create({
                                xtype: 'window',
                                id: 'imageuploadwindow',
                                title: '上传货品Logo',
                                layout: 'fit',
                                width: 1376,
                                height: 654,
                                loader: {
                                    url: '/hlt/ws/imageUpload.jsp',
                                    autoLoad: true,
                                    loadMask: 'loading...',
                                    scripts: true,
                                    renderer: 'html',
                                    params: {
                                        recordId: me.getViewModel().get('record').data.id,
                                        schema: 'COMMODITY_LOGO'
                                    }
                                }
                            }).show();
                    }
                });
        }
    });
}
mnuContext = new Ext.menu.Menu({
    items: items
});
e.stopEvent();
mnuContext.showAt(e.getXY());

选择企业

var me = this;
if (!Ext.getCmp('entitySelectWindow'))
    var window = Ext.create({
        id: 'entitySelectWindow',
        xtype: 'window',
        width: 1200,
        height: 600,
        layout: 'fit',
        maximizable: true,
        title: '选择企业',
        items: [{
            xtype: 'enterprises',
            title: '',
            viewStatus: {
                name: 'select',
                callback: function(item) {
                    //console.log(items);
                    me.getReferences().entId.setValue(item.data.id);
                    me.getReferences().entName.setValue(item.data.name);
                    window.close();
                }
            }
        }]

    }).show();

选择城市

 selectCity: function(component, event, eOpts) {
        var me  =this;
        if(!Ext.getCmp("CitySelectWindow"))
        {

            var window = Ext.create({
                id:"CitySelectWindow",
                xtype: 'cityselectwindow',
                callback:function(code){
                    me.getReferences().addressCode.setValue(code);
                    Ext.Ajax.request({
                        url: '/hlt/ws/area/detail?code='+code,
                        success: function(data){
                            //alert(data.responseText);
                            var obj = Ext.decode(data.responseText);
                            me.getReferences().addressName.setValue(obj.fullName);

                        },
                        failure: function(){alert("发生错误!");}
                    });
                }
            });
            window.show();
        }
    }

选择商品种类

selectCommodityCategory: function(component, event, eOpts) {
        var me = this;
        if (!Ext.getCmp('entitySelectWindow'))
        var window = Ext.create({
            id: 'entitySelectWindow',
            xtype: 'window',
            width: 1200,
            height: 600,
            layout: 'fit',
            maximizable: true,
            title: '选择商品种类',
            items: [{
                xtype: 'selectcommoditycategories',
                title: '',
                select: function(item) {
                    //console.log(items);
                    me.getReferences().commodityCategoryId.setValue(item.data.id);
                    me.getReferences().commodityCategoryName.setValue(item.data.name);
                    window.close();
                }
            }]

        }).show();
    }

动态选择实体(新)

var me = this;
var selectedContentType = this.getReferences().contentType.findRecordByValue(this.getReferences().contentType.getValue());
if (!Ext.getCmp('entitySelectWindow'))
    if (selectedContentType)
        var window = Ext.create({
            id: 'entitySelectWindow',
            xtype: 'window',
            width: 1200,
            height: 600,
            layout: 'fit',
            maximizable: true,
            title: '选择实体',
            items: [{
                xtype: selectedContentType.data.view,
                title: '',
                viewStatus: {
                    name: 'select',
                    callback: function(item) {
                        //console.log(items);
                        me.getReferences().contentId.setValue(item.data.id);
                        window.close();
                    }
                }
            }]

        }).show();

刷新按钮单击事件

button.up('panel').down('gridpanel').getStore().load();

logo图片预览

return '<img width=20 height=20 src='+value+' />';

批量删除

var records = me.getReferences().list.getSelection(),

渲染日期类型

return Ext.Date.format(value,'Y-m-d H:i:s');

货币类型格式化

return Ext.util.Format.number(value,"0,000.00");

自动选择上级id作为parentId的值

在add事件中创建Record代码之后插入如下代码:

var selectedRows =this.getReferences().tree.getSelection();
        if(selectedRows&&selectedRows.length==1)
        newRecord.data.parentId=selectedRows[0].data.id;

检查按钮权限(绑定view added事件)

Ext.Array.each(this.getView().query('button[pcode]'), function(button, index, countriesItSelf) {
    Ext.Ajax.request({
        url:'/hlt/ws/sys/privilege/check/${privilegeGroup}'+button.config.pcode,
        success:function(response){
            if(!Ext.JSON.decode(response.responseText).data)
                me.getView().query('toolbar[dock=top]')[0].remove(button);
        }
    });
});

加载默认选中项

var me = this;
var vs = this.getView().config.viewStatus;
var store = this.getReferences().list.getStore();
me.getViewModel().set('original', new Array());
if (Ext.isObject(vs.defaultSelection)) {
    Ext.Ajax.request({
        url: vs.defaultSelection.api,
        method: vs.defaultSelection.method ? vs.defaultSelection : 'post',
        success: function(data) {
            //alert(data.responseText);
            var obj = Ext.decode(data.responseText);
            //Ext.Msg.alert('成功', obj.message);
            if (obj.data) {
                var original = new Array();
                Ext.Array.each(obj.data, function(item) {
                    var record;
                    if (Ext.isObject(record = store.findRecord('id', item[vs.defaultSelection.idField], 0, false, true, true))) {
                        me.getReferences().list.getSelectionModel().select(record, true, true);
                        original.push({
                            id: record.data.id
                        });
                    }
                });
                me.getViewModel().set('original', original);
            }
        },
        failure: function(data) {
            Ext.Msg.show({
                title: '错误',
                message: Ext.decode(data.responseText).message,
                buttons: Ext.Msg.OK,
                icon: Ext.Msg.ERROR
            });
        },
        headers: {
            'Content-Type': 'application/json'
        },
        params: Ext.encode(vs.defaultSelection.params)
    });
}

list filter

filter: {
    type: 'list',
    idField: 'name',
    labelField: 'name',
    store: {
        model: 'Admin.model.NameValue',
        proxy: {
            type: 'ajax',
            extraParams: {
                enumType: 'ENT_SCALE'
            },
            url: '/hlt/ws/enum//get/json',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    }
}

textarea resizeable(afterrender事件)

new Ext.resizer.Resizer({
        target: this.getReferences().review.inputWrap
});

异常消息框

Ext.Msg.show({
    title: 'Save Changes?',
    message: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
    buttons: Ext.Msg.OK,
    icon: Ext.Msg.ERROR
});

表格列记忆

列隐藏

onGridpanelColumnhide: function(ct, column, eOpts) {
    Ext.Ajax.request({
        url: '/hlt/ws/extjs/grid/column/hide?id=' + column.dataIndex + '&name=' + column.text + '&xtype=' + column.xtype + '&table=enterprise',
        async: false,
        success: function(response) {}
    });

}

列显示

onGridpanelColumnshow: function(ct, column, eOpts) {
    Ext.Ajax.request({
        url: '/hlt/ws/extjs/grid/column/show?id=' + column.dataIndex + '&name=' + column.text + '&table=enterprise',
        async: false,
        success: function(response) {}
    });
}

表格加载完成后根据用户配置显示/隐藏列

onGridpanelAfterRender: function(component, eOpts) {

    var columns = component.columns;
    Ext.Ajax.request({
        url: '/hlt/ws/extjs/grid/column/hideList?table=enterprise',
        async: false,
        success: function(response) {
            if (Ext.JSON.decode(response.responseText).data) {
                var res = Ext.JSON.decode(response.responseText).data;
                console.log("response", res);
                for (var j = 0; j < res.length; j++)
                    for (var i = 0; i < columns.length; i++)
                        if (columns[i].dataIndex == res[j].dataindex)
                            columns[i].hide();
            }
        }
    });
}

表格选择模式

1. 创建新的Panel View
2. 拷贝管理视图中的list到新建的Panel中
3. 设置layout=border
4. 添加toolbar
5. 创建选择按钮
6. 处理选择按钮单击
7. 处理表格行双击

选择按钮单击事件回调

 selectByButton: function(button, e, eOpts) {
        this.getView().config.select(this.getViewModel().get('record'));
    }

表格行双击

selectByRowDbClick: function(tableview, record, tr, rowIndex, e, eOpts) {
        this.getView().config.select(record);
    }

检查按钮权限

checkButtonsPrivilege: function(component, container, pos, eOpts) {
        var me=this;
        //检查按钮权限
        Ext.Array.each(this.getView().query('button[pcode]'), function(button, index, countriesItSelf) {
            Ext.Ajax.request({
                url:'/hlt/ws/sys/privilege/check/PG_ZIYINGXINXI/'+button.config.pcode,
                success:function(response){
                    if(!Ext.JSON.decode(response.responseText).data)
                    me.getView().query('toolbar[dock=top]')[0].remove(button);
                }
            });
        });
    }

AJAX

#json参数的ajax请求
Ext.Ajax.request({
    method:'POST',
    url: '/hlt/ws/sys/privilege/list',
    success: function(data){
        //alert(data.responseText);
        var obj = Ext.decode(data.responseText);
    },
    failure: function(){alert("发生错误!");},
    headers: {'Content-Type':'application/json'},
    params: Ext.encode({
        andGroupIdEqualTo:parseInt(selected[0].data.id,0)
    })
});




 Ext.Ajax.request({
     url: url,
     method: 'post',
     success: function(data) {
         //alert(data.responseText);
         var obj = Ext.decode(data.responseText);
         Ext.Msg.alert('成功', obj.message);
     },
     failure: function(data) {
         Ext.Msg.show({
             title: '错误',
             message: Ext.decode(data.responseText).message,
             buttons: Ext.Msg.OK,
             icon: Ext.Msg.ERROR
         });
     },
     headers: {
         'Content-Type': 'application/json'
     },
     params: Ext.encode({
         id: infoId,
         companyId: companyIds,
         message: this.getReferences().msg.getValue()
     })
 });

树

数据库配置

1. 所有表现为树形结构的数据表都要有parent_id、level两个列

MyBatis配置

• 添加leaf、children字段
• mapper.xml添加映射
• Mapper中添加 List selectChildsByParentId(int parentId);

<association property="leaf" javaType="java.lang.Boolean" column="id" fetchType="lazy" select="selectIsLeaf" />

<select id="selectIsLeaf" resultType="java.lang.Boolean" parameterType="java.lang.Integer">
                        SELECT IF(COUNT(id)>0,FALSE,TRUE)  FROM hlt_quotation hq  WHERE hq.parent_id=#{parentId,jdbcType=INTEGER}
                      </select>

<select id="selectChildsByParentId" resultMap="BaseResultMap" parameterType="java.lang.Integer">
                        select
                        <include refid="Base_Column_List"/>
                        from hlt_quotation
                        where parent_id = #{parentId,jdbcType=INTEGER}
                      </select>

服务层添加方法

    public List<HltQuotation> getFirstLevelQuotations() {
        HltQuotationExample hltQuotationExample = new HltQuotationExample();
        hltQuotationExample.or().andLevelEqualTo(1);
        return hltQuotationMapper.selectByExample(hltQuotationExample);
    }

   public List<HltQuotation> getChildQuotations(Integer parentId) {
        return hltQuotationMapper.selectChildsByParentId(parentId);
    }

private void setLevel(HltSysPrivilegeGroup hltSysPrivilegeGroup) {
        hltSysPrivilegeGroup.setLevel(
                Optional.ofNullable(hltSysPrivilegeGroup).isPresent() &&
                        Optional.ofNullable(hltSysPrivilegeGroup.getParentId()).isPresent() ?
                        dao.getById(hltSysPrivilegeGroup.getParentId()).getLevel() + 1 : 1);
    }

控制器层添加方法

@RequestMapping(value = "/child/{id}", method = RequestMethod.GET, produces = {"application/json"})
    @ApiOperation(value = "读取指定行情分类下的所有子分类,如果行情分类编号为root,则返回所有一级行情分类")
    @ResponseBody
    public JSONResponse child(@PathVariable @ApiParam(value = "行情分类编号") String id) {
        if (!Optional.ofNullable(id).isPresent()) return JSONResponse.failure();
        return JSONResponse.ok().add("children", id.trim().equals("root") ? service.getFirstLevelQuotationCategories()
                : service.getChildQuotationCategories(Integer.valueOf(id)));
    }

extjs配置

• 使用ui builder生成默认的界面和配置
• 将模型的id字段的类型改为字符串类型
• 新增treestore(除了reader不要配置rootproperty属性外其它配置都与普通列表所使用的store相同)
• 添加treepanel
  
  • rootVisible: false,
  • useArrows: true,
  • 设置store
  • 添加treecolumn