Sencha Touch开发iPad应用的方法和技巧-技术开发专区

Sencha Touch开发iPad应用的方法和技巧

作者：廖煜嵘编辑：景保玉 2011-08-15 03:05 IT168网站原创

　　设计页面主要部分

　　在学习完使用模版后，接下来我们开始设计页面中的右边部分，即主体部分，期望设计后的运行效果如下图：

设计页面主要部分
▲

　　在右边的页面部分中，最上方突出显示的部分是显示了新闻的主要部分，我们先设计该部分的代码，同上文一样，我们采用了template技术，先定义主要新闻内容的变量，如下：

var story1 = { headline: "The Main Story Headline Goes Here.", image_url: "imagemain.png", body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh eusmod tincidunt ut laoreet dolore magna aliquam erat volputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat." };

　　可以看到，依然定义了headline,image_url和body部分，在body部分，这里是静态固定了新闻内容，在实际的应用中，一般是动态从数据库中获取数据。接下来，我们继续使用模版面板的技术，代码如下：

   var storyMain = new Ext.Template(
    '<tpl for=".">',
        '<div class="headline-main">{headline}</div>',
        '<div><img src="{image_url}" width="468" height="220" /></div>',
        '<div class="bodycopy">{body:ellipsis(475, true)}</div>',
    '</tpl>'
);

　　这里只需要注意使用了内置的ellipsis方法去截取字符串，最多保留475个字符。

　　接下来，象上一讲那样，完善我们的面板，如下：

   var storyPanelOne = new Ext.Panel({
    layout: 'auto',
    tpl: storyMain
});

storyPanelOne.update(story1);

　　最后，不要忘记在我们第一讲中的右边部分的最大的面板stories中，进行修改，如下：

  var stories = new Ext.Panel({
    height: 859,
    flex: 2,
    scroll: 'vertical',
    items: [storyPanelOne]
});

　　这里设置了scroll属性，即有了滚动条(垂直往下的)，方便用户向下拉，以查看更多的内容。完成剩下的三个新闻区域

　　最后，我们把剩下的右边区域下方的三个新闻区域完成。同样，先定义三个变量，分别指向其实际内容：

　　并且编写模版和使用这些模版的面板，如下：

　　可以看到，其中在items中，按从上到下的顺序，把4个面板都分别加了进来。

第1页：ipad应用设计页面左边部分第2页：ipad应用设计页面主要部分第3页：查看详细新闻的动画效果

关注我们