Sencha Touch 2 动态获取容器数据/存储
Posted
技术标签:
【中文标题】Sencha Touch 2 动态获取容器数据/存储【英文标题】:Sench Touch 2 get container data /store dynamically 【发布时间】:2013-02-02 13:30:36 【问题描述】:我想动态获取容器数据。任何人都可以帮助我动态显示容器项目。日期或商店 url 可能是一些外部页面,我想使用 MVC 获取容器商店/日期。有什么可以帮助我的吗?
下面是我的代码
Ext.define('Mvcapp.view.LayoutList',
extend: 'Ext.Container',
xtype: 'layoutlist',
config:
title: 'Layout',
iconCls:'star',
stylehtmlContent: true,
items:[
data: [
fname: 'Stratton',
lname: 'Sclavos',
role: 'Executive Chairman'
,
fname: 'Michael',
lname: 'Mullany',
role: 'CEO'
,
fname: 'Ted',
lname: 'Driscoll',
role: 'Vice President Worldwide Sales'
,
fname: 'Abraham',
lname: 'Elias',
role: 'Chief Technical Officer'
,
fname: 'Jeff',
lname: 'Hartley',
role: 'Vice President of Services and Training'
,
fname: 'Adam',
lname: 'Mishcon',
role: 'Vice President of Operations'
,
fname: 'Judy',
lname: 'Lin',
role: 'Vice President of Engineering'
], // data
tpl: '<tpl for="."><div style="float:left;width:300px;"><strong>lname</strong>, fname <em class="muted">(role)</em></div></tpl>'
]
);
【问题讨论】:
【参考方案1】:您需要做的是,首先定义一个具有必填字段的模型。接下来创建一个商店并将模型配置设置为先前定义的。在定义商店时,您需要从 sencha touch 提供的各种代理中进行选择。如果您正在构建为手机构建的应用程序,那么没有太多选择。您只需使用 JsonP 代理即可。
这就是我要做的 -
var listitem=Ext.define('ListItem',
extend: 'Ext.data.Model',
config:
fields: ['fname','lname','role']
);
var store = Ext.create('Ext.data.Store',
model: listitem,
autoLoad: true,
proxy:
type: 'jsonp',
url: 'http://localhost/json_feed_url.php',
reader:
type: 'json',
rootProperty: 'data'
);
var myList = Ext.create('Ext.List',
styleHtmlContent:true,
store:store,
itemTpl:['<div style="float:left;width:300px;"><strong>lname</strong>, fname <em class="muted">(role)</em></div>']
);
Ext.Viewport.add(myList);
如您所见,我首先为我们的商店定义了模型。 Store 是使用 JsonP 代理创建的,并设置为自动加载。我还设置了阅读器,它将读取从服务器收到的响应并解析它。我现在不必再担心了,因为我只需设置 rootPropery。
接下来创建一个列表,并在其配置中分配先前定义的store
。因此,每当运行这段代码时,store 都会从服务器获取数据并将其显示在列表中。猜猜这就是你想要的。
首先,只需将此部分放入您的 app.js
的 launch
方法中,您就可以开始了。如果你想要这里的 php 代码 -
<?php header('Content-type:application/javascript');
$items =array();
$items[] = array('fname'=>'A','lname'=>'B','role'=>1);
$items[] = array('fname'=>'C','lname'=>'D','role'=>2);
$items[] = array('fname'=>'E','lname'=>'F','role'=>3);
$items[] = array('fname'=>'G','lname'=>'H','role'=>4);
$items[] = array('fname'=>'I','lname'=>'J','role'=>5);
print $_GET['callback'].'('.json_encode(array('data'=>$items)) .')';
?>
我对 php n 都很熟悉,但你可以使用任何适合你的东西。想法是一样的。 :D
【讨论】:
感谢您的回复,但我想在标签面板中显示像 cdn.sencha.io/touch/sencha-touch-2.1.0/examples/touchstyle/… 这样的项目。以上是关于Sencha Touch 2 动态获取容器数据/存储的主要内容,如果未能解决你的问题,请参考以下文章
使用 Sencha Touch 2 FormPanel 定位容器