Extjs Sencha touch 2 MVC商店

Extjs Sencha touch 2 MVC商店,extjs,Extjs,我正在寻找sencha touch 2 MVC STORE的教程或示例,它处理Jsonp链接并从那里获取数据,只有MVC基础。我需要了解STORE、Model、Controller和View如何在基于MVC的结构中相互交互。有什么建议吗?我需要了解如何获取和使用jsonp链接和数据,谢谢下载sencha touch 2并找到oreilly示例。在本例中,在About panel Tweets页面中,从存储加载数据(读卡器类型为jsonp)。此外,您还应该查看其他示例,如touchtweets、g

我正在寻找sencha touch 2 MVC STORE的教程或示例,它处理Jsonp链接并从那里获取数据,只有MVC基础。我需要了解STORE、Model、Controller和View如何在基于MVC的结构中相互交互。有什么建议吗?我需要了解如何获取和使用jsonp链接和数据,谢谢下载sencha touch 2并找到oreilly示例。在本例中,在About panel Tweets页面中,从存储加载数据(读卡器类型为jsonp)。此外,您还应该查看其他示例,如touchtweets、geocongress、navigationview等。
我认为这是最好的开始方式

我发现文档中有很多关于理解sencha touch的MVC结构以及商店和模型等各个主题的好教程

深度MVC第1部分:

深度MVC第2部分:

文档中还有一个指南部分,其中也介绍了您需要了解的所有内容。
一个使用jsonp建模、存储和查看的简单示例

jsonp的样子。

callback({"Message":"Success","Post":[{"id":"35","UserId":"faisalkhalid690","Content":"lol","Time":"2013-12-03 05:28:15"},{"id":"50","UserId":"faisalkhalid","Content":"asdfasdfasdf","Time":"2013-12-03 05:52:27"},{"id":"51","UserId":"faisalkhalid","Content":"sadfasdfasdf","Time":"2013-12-03 05:52:38"},{"id":"52","UserId":"faisalkhalid","Content":"holloa","Time":"2013-12-03 05:52:50"},{"id":"70","UserId":"faisalkhalid690","Content":"hello","Time":"2013-12-04 23:22:52"}]});
Ext.define('talkbag.model.Comments', {
    extend: 'Ext.data.Model',

    config: {
           idProperty: 'id',
        fields: [
            { name: 'id', type: 'auto' },
            { name: 'UserId', type: 'auto' },
            { name: 'Content', type: 'auto' },
            { name: 'Time', type: 'auto' }

        ]
    }
});
此jsonp的模型。

callback({"Message":"Success","Post":[{"id":"35","UserId":"faisalkhalid690","Content":"lol","Time":"2013-12-03 05:28:15"},{"id":"50","UserId":"faisalkhalid","Content":"asdfasdfasdf","Time":"2013-12-03 05:52:27"},{"id":"51","UserId":"faisalkhalid","Content":"sadfasdfasdf","Time":"2013-12-03 05:52:38"},{"id":"52","UserId":"faisalkhalid","Content":"holloa","Time":"2013-12-03 05:52:50"},{"id":"70","UserId":"faisalkhalid690","Content":"hello","Time":"2013-12-04 23:22:52"}]});
Ext.define('talkbag.model.Comments', {
    extend: 'Ext.data.Model',

    config: {
           idProperty: 'id',
        fields: [
            { name: 'id', type: 'auto' },
            { name: 'UserId', type: 'auto' },
            { name: 'Content', type: 'auto' },
            { name: 'Time', type: 'auto' }

        ]
    }
});
商店:

Ext.define('talkbag.store.Comments', {
extend:'Ext.data.Store',

storeId:'Comments',
config:{
    autoLoad: true,
       model:'talkbag.model.Comments',
         proxy: {
            type: 'jsonp',
            url : 'http://www.litemake.com/ViewComments.php?Pid='+talkbag.User.PostId,
            reader: {
                type: 'json',
                rootProperty: 'Post'
            }
        }
    }

});
Ext.define('talkbag.view.ViewPost.ViewCommentDetail', {

xtype:'ViewCommentDetail',
extend:'Ext.dataview.List',
config:{
  store:'Comments', 
itemTpl:'<table><tr><td width="80px"><table align="center"><tr><td align="center"><img src="http://www.litemake.com/getPic.php?userId={UserId}" heigth="30px" width="30px"/></td></tr><tr><td style="font-size:0.6em">{UserId}</td></tr></table></td><td style="padding-left:20px"><table><tr><td style="font-size:0.7em; padding:0px 0px 5px 0px">{Content}</td></tr><tr><td style="font-size:0.5em">{Time}</td></tr></table></td></tr></table>'

}

});
查看:

Ext.define('talkbag.store.Comments', {
extend:'Ext.data.Store',

storeId:'Comments',
config:{
    autoLoad: true,
       model:'talkbag.model.Comments',
         proxy: {
            type: 'jsonp',
            url : 'http://www.litemake.com/ViewComments.php?Pid='+talkbag.User.PostId,
            reader: {
                type: 'json',
                rootProperty: 'Post'
            }
        }
    }

});
Ext.define('talkbag.view.ViewPost.ViewCommentDetail', {

xtype:'ViewCommentDetail',
extend:'Ext.dataview.List',
config:{
  store:'Comments', 
itemTpl:'<table><tr><td width="80px"><table align="center"><tr><td align="center"><img src="http://www.litemake.com/getPic.php?userId={UserId}" heigth="30px" width="30px"/></td></tr><tr><td style="font-size:0.6em">{UserId}</td></tr></table></td><td style="padding-left:20px"><table><tr><td style="font-size:0.7em; padding:0px 0px 5px 0px">{Content}</td></tr><tr><td style="font-size:0.5em">{Time}</td></tr></table></td></tr></table>'

}

});
Ext.define('talkbag.view.ViewPost.ViewCommentDetail'{
xtype:'ViewCommentDetail',
扩展:'Ext.dataview.List',
配置:{
商店:'评论',
itemTpl:“{UserId}{Content}{Time}”
}
});

如果您需要关于JSONP服务器端的一些信息,请查看

在那里,您可以找到服务器端方法来处理对常见服务器端编程语言(如PHP、Java或ASP.net)的JSONP请求

对于PHP,它将如下所示:

// From your Sencha JSONP Store, you will get a callback parameter which we
// need to put in our $callback var, for later usage.
$callback = $_REQUEST['callback'];


// Create the output object.
// this could also be a database output, but remember to      
// convert it into an array
$output = array('a' => 'Apple', 'b' => 'Banana');

// start output
// this section switches between a jsonp callback or usual json output.
if ($callback) {
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}
正如费萨尔·哈立德(Faisal Khalid)已经说过的那样,输出将看起来像

myCallbackName({
    "message":"success",
    "total":2,
    "data":[
             {"prename":"Bob","lastname":"example"},
             {"prename":"John","lastname":"Beard"}
           ]
});
。。。您已经将myCallbackName定义为sencha应用程序(存储配置)中的回调名称

配置名为callbackKey,默认设置为callback。

Sposibo bolshoe drug:)eto Sencha zakalibala menya