sencha touch list里包含组件

以一个购物车的商品列表为例

列表显示层list组件:

{
    xtype: ‘dataview‘,
    id: ‘cart_view_list‘,
    itemCls: ‘cart-view-list‘,
    store: ‘Cart‘,
    emptyText: ‘无商品‘,
    cls: ‘dataview-basic‘,
    useComponents: true,
    defaultType: ‘cartViewGoods‘
}

通过defaultType加载另一个view页面:

Ext.define(‘XX.view.CartViewGoods‘,{
    extend: ‘Ext.dataview.component.DataItem‘,
    alias: ‘widget.cartViewGoods‘,
    config:{
        layout: ‘hbox‘,
        items:[
            {
                xtype: ‘image‘,
                itemId: ‘cart_goods_view_img‘,
                src: config.website+‘/assets/img/nopic3.png‘,
                height: 64,
                flex: 2,
                style: {
                    ‘background-size‘: ‘64px‘
                }
            },
            {
                xtype: ‘component‘,
                flex: 2,
                itemId: ‘cart_goods_view_name‘,
                html: ‘商品名称‘,
                padding: ‘5px 0 10px 0‘
            },{
                xtype: ‘spinnerfield‘,
                itemId: ‘cart_goods_view_spinner‘,
                flex:3,
                minValue: 1,
                maxValue: 100,
                stepValue: 1,
                groupButtons: false,
                padding: ‘13px 0 13px 0‘
            },{
                xtype: ‘button‘,
                flex: 1,
                text: ‘删除‘,
                margin: ‘15px 0 0 0‘
            }
        ]
    },
    updateRecord: function(record){
        var me =this;
        if(record.get(‘directory‘) && (record.get(‘logo‘) != "" || record.get(‘logo‘) != "noMatch")){
            var img = config.upload+"s/"+record.get(‘directory‘)+‘/‘+record.get(‘logo‘);
            me.down(‘#cart_goods_view_img‘).setSrc(img);
        }
        me.down(‘#cart_goods_view_name‘).setHtml((record.get(‘name‘).length < 10 ? record.get(‘name‘) : record.get(‘name‘).substr(0,8)+"...")+"<br>¥"+record.get(‘price‘));
        me.down(‘#cart_goods_view_spinner‘).setValue(record.get(‘qty‘));
        me.down(‘#cart_goods_view_spinner‘).setMaxValue(record.get(‘stock‘));
        this.callParent(arguments);
    }
});

其它controller 与model 省略

结果图:

有一个问题没解决,me.down是取

cartViewGoods

下的第一层组件,如果是取第二层组件要怎么获取呢?

例如:

{
    xtype: ‘component‘,
    flex: 2,
    itemId: ‘cart_goods_view_name‘,
    layout: ‘vbox‘,
    items: [
        {
            xtype: ‘component‘,
            itemId: ‘cart_goods_view_name_title‘,
            flex: 1
        },{
            xtype: ‘component‘,
            itemId: ‘cart_goods_view_name_content‘,
            flex: 1
        }
    ]
}

像上面的,怎么获取

cart_goods_view_name_title

或:

cart_goods_view_name_content

元素?

时间: 2024-10-27 05:40:08

sencha touch list里包含组件的相关文章

HTML5开发移动web应用——Sencha Touch篇(12)

Sencha Touch同样可以使用地图.多媒体等插件. 1.Map组件 我们通过Ext.Map定义Map组件,其xtype为map.除了使用该插件外,还要调用Google的地图API所使用的js文件,代码如下: <script src="https://maps.google.com/maps/api/js?sensor=true"></script> 引入该文件后,我们就可以编写js代码来显示地图了: Ext.require('Ext.Map') Ext.a

【翻译】探究Ext JS 5和Sencha Touch的布局系统

原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每一个组件的尺寸和位置.在Ext JS和Sencha Touch直接有很多相似之处.尤其是如今Ext JS 5開始支持平板更是如此.以下让我们来探讨一下布局系统是怎样跨域Sencha框架进行工作的. 布局简史 最主要的HTML一直都缺乏一个严格定义的布局系统. 很多年来,因为CSS实现的差距.开发跨浏

Sencha学习笔记4: Creating your First App - 官方创建您的第一个Sencha Touch应用指导

英文原文地址:http://docs.sencha.com/touch/2.3.1/#!/guide/first_app (天地会珠海分舵声明:本翻译文章建议读者参照英文原文进行阅读,因为原文包含了实时代码编辑和预览的功能,这在csdn是不能做到的,所以下面只是提供了相应的截图,而非真实的演示) Required Software 软件需求 请参考<Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南> Crea

Sencha Touch 手机移动开发框架 HTML5 项目压缩方案 (一);

Sencha Touch框架生成基本项目目录结构 Index.html/ App.js App.json /touch[sdk]/ /Sencha-touch.js /src Resources/ App/ app.js以及app.json 是程序的入口点及基本加载配置: /touch[sdk] sencha-touch[debug|min...].js 是 SDK 文件 /src 这里是存放组件的位置 Resources/用于存放 样式及图片等资源文件; app/用于存放我们编写的程序源码:

HTML5开发移动web应用——Sencha Touch篇(8)

DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,可以讲任何数据以形象的方式展示给用户.目前,如何更好地可视化是许多公司或框架都在追求的.通过数据的可视化可以发现数据之间的规律,预测未来的情况.下面我们就看看Sencha Touch中是怎么进行数据可视化的. 由于DataView组件内容非常多,所以将在以后的一段时间内持续这一部分的学习. 首先废话不多说,直接上使用DataView组件的代码框架. launch:function(){ var

HTML5开发实战——Sencha Touch篇(1)

学习了许多基本的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建.先要解决的是前端的问题,从最简单的入手,一个基本的登录界面. 最简单的登录界面大体由以下介个元素组成:用户头像部分.用户名输入部分.密码输入部分.提交按钮.我们从这种虽简单的界面开始,逐步进行界面实现. 一.创建主面板 Ext.require('Ext.Panel'); Ext.application({ name:'MyApp'

前端是Sencha Touch+ Cordova(转)

从13年初开始,我的关注点一直在两个点上,一个是股票,一个是移动前端和大数据技术,互联网金融的发展会让互联网证券越来越火热,当然,我也希望将这两个关注点结合到一起,做一些事情. 现在,我的APP和微信公众号已经上线,每天下班都会花一个多小时的时间在他们的开发上,每天白天脑子里基本都在想,怎么去改进.完善.还能做哪些有意义的新功能,然后晚上把代码写出来,这期间不仅有技术上的补充,还包括对股市投资的一些知识补充,我老婆说我已经着了魔了,陪她出来逛街时都不在状态.. 随着对股票投资的理解,我的APP的

Sencha Touch 之初接触

1.Sencha Touch开发与普通web开发有什么区别? Sencha Touch(为方便起见,本文后面一律简写为ST)页面的开发跟普通html页面相比,总体来说没有本质上的区别,只是引入了对html5和CSS3的支持,然后提供了对移动设备(iPad/iPhone/Android Mobile/Android Tablet/BlackBerry等)的特殊优化.事实上也正是因为html5和CSS3才使得ST可以实现如此美妙以至于可以媲美Native应用程序的交互效果. 2.特殊的Documen

用 Sencha Touch 构建移动 web 应用程序

Sencha Touch 是一个使用 HTML5.CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发.下载和建立 Sencha Touch,通过一个样例应用程序探究基本原理.学习开始使用 Sencha Touch 框架所需的一切 2012 年 3 月 19 日 内容 概述 Sencha Touch 准备开始 UI components 结束语 参考资料 评论 概述 在软件开发领域中,有两个重要的趋势越来