Extjs 循环遍历图片,动态得到图片的信息

if (typeof (Page) == 'undefined' || Page == null) { Page = {}; }

/** 
 * 版型选择画面
 */
Ext.apply(Page.ChooseTemplate, {
    JS_NO: 'JS13', // 用于生成控件ID,防止控件ID重复
    /**
     * 生成template模板选择窗口 
     * @param initCfg.winWidth 窗口宽度
     * @param initCfg.winHeight 窗口高度
     * @param initCfg.type 模板的类型(event,event详细,项目)
     * @param initCfg.selectCallbackFn 选择的回调函数 
     */
    init: function(initCfg) {
        // ID定义 ///
        var id_form = Com.Utility.getId(this, 'form'),//form
            id_window = Com.Utility.getId(this, 'window');//window
        
        Com.Ajax.createAjaxRequest({
            url: 'template!getTemplateType',
            params:{
                'templateDto.template.type': initCfg.type
            },
            succFn: function (returnObj) {
                if(returnObj.data.items.length<1) {
                    Com.Msg.showInfoMsg('INFO_004');// 模板信息为空
                    return;
                }
*************************************************************                
                // 后台template表中有记录
                var displayData = [];
                var allRdos = [];
                for(var i = 0, max = returnObj.data.items.length; i < max; i++){
                    var data = returnObj.data.items[i];
                    // 图片
                    var img = Ext.create('Ext.Img', {
                        width: 150,
                        height: 200,
                        margin: '0 10 0 0',//上右下左
                        src: data.imgUrl
                    });
                    // 单选框
                    var rdo = Ext.create('Ext.form.field.Radio', { 
                        margin: '0 0 0 50',
                        boxLabel: data.name, 
                        name: 'tpl', 
                        inputValue: data.id
                    });
                    rdo.obj = data;
                    
                    allRdos.push(rdo);
                    // 上下布局
                    displayData.push({
                        xtype: 'container',
                        items: [img, rdo],
                        flex: 1
                    });
                }
                var chooseform = Ext.create('Ext.form.Panel', {
                    id: id_form,
                    layout: 'table',
                    border: false,
                    bodyPadding: 10,
                    items: displayData
                });
                var window = Ext.create('Haso.Components.Window',{
                    id: id_window,
                    width: initCfg.winWidth,
                    height: initCfg.winHeight,
                    title: Page.ChooseTemplate.Res.WINDOW_TITLE,
                    items: chooseform,
                    buttons: [{
                        text: Res.Com.CHOOSE,// 选择
                        handler: function(){
                            for(var i = 0, max = allRdos.length; i < max;i++) {
                                var rdo = allRdos[i];
                                // 执行选择的回调函数
                                var id = rdo.obj.id;
                                var name = rdo.obj.name;
                                if(rdo.checked) {
                                    initCfg.selectCallbackFn(id, name);
                                }
                            }
                            Ext.getCmp(id_window).close();
                        }
                    },'->',{
                        text: Res.Com.CLOSE,// 关闭
                        listeners: {
                            click: function(){
                                Ext.getCmp(id_window).close();
                            }
                        }
                    }]
                });
                window.show();
            }
        });
    }
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值