Ext.define("mvc.controller.testController",{
extend:"Ext.app.Controller",
config:{
routes: {//路由
/* 以路由功能为基础,为应用程序设置访问历史功能支持变得很容易。
* 路由实现原理:就是url和控制器动作之间的映射,
* 当地址栏中的一个特定类型url被检测到的时候,
* 相应的控制其动作就会被自动调用
*/
//http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#login
//通过在index.html的后面添加#login即可访问showLogin里的方法。
//这个可认为是深链接。我们可以将链接的任意部分发送出去,当这个链接被单击时候页面会加载到正确的位置。
//而不是应用程序的初始位置。
'login': 'showLogin',
//:id是参数
//http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#user/234
//即可把234当做参数传递给shouUserById这个函数
'user/:id': 'showUserById',
//包含两个参数id,format,
//http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#products/12/abc
//即可把12和abc当做参数传递给showProductInFormat函数
'products/:id/:format': 'showProductInFormat',
//路由进阶
/* 路由进阶产生原因:
正常情况下 路由中的通配符可以匹配任意连续的字母和数字字符串。
* 比如"products/:id/edit"这个路由可以匹配"#products/123/edit",
* 但是却不能匹配"#products/a ,fd.sd/edit",后面这个url包含了一些非法字符(空格,逗号,点号);
* 传参需求:
* 但是有时候我们还是需要路由能够匹配类似的url,比如我们的url包含一个文件名,我们想把它取出来。
* 路由进阶解决办法:
* 也就是说可以使用一个包含了action属性的配置对象来取代action字符串。
* 除此之外,我们给这这个对象添加一个conditions属性,
* 这个属性定义了:filename这个参数可以匹配英文数字、阿拉伯数字外加一个英文点号。
* 这样我们的路由现在就可以匹配像http://myapp.com/#file/someFile.jpg这样的url了,
* 它会把someFile.jpg作为参数传递给控制器的showFile函数。
* //http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#file/someFile.jpg
*/
'file/:filename': {
action: 'showFile',
conditions: {
':filename': "[0-9a-zA-Z\.]+"
}
}
},
refs:{//可以使用itemId或者选择器进行查找过滤
conView:"#controllerView",
tabOneApple:"button[action=tabOneApple]",
//查找button中action是tabOneApple的按钮
infoPanel: {
selector: 'tabpanel panel[name=fish] textfield',
//查找 tabpanel中item的name是fish的这个tab,tab的items中是否含有xtype是textfield的
//如果不含有则根据下面的xtype和autoCreate自动创建textfield组件
xtype: 'textfield',
autoCreate: true
}
},
control:{
tabOneApple: {
tap: 'doTabOneApple'
},
'button[action=tabOneBanana]': {
tap: 'doTabOneBanana'
}
},
},
showLogin:function(){
// this.getConView().addComponent("小苹果");
// this.getConView().items.getAt(0).add({
// xtype:"textfield",
// label:"ssss"
// })
},
showUserById:function(id){
console.log("id=="+id)
},
showProductInFormat:function(id,format){
console.log("id=="+id+",format=="+format);
},
showFile:function(filename){
console.log(filename)
},
doTabOneApple:function(){
var infoPanel=this.getInfoPanel();
infoPanel.setLabel("hellow")
this.getConView().items.getAt(0).add(infoPanel)
},
doTabOneBanana:function(){
this.getTabOneApple().setText("I like apple!")
}
})
extend:"Ext.app.Controller",
config:{
routes: {//路由
/* 以路由功能为基础,为应用程序设置访问历史功能支持变得很容易。
* 路由实现原理:就是url和控制器动作之间的映射,
* 当地址栏中的一个特定类型url被检测到的时候,
* 相应的控制其动作就会被自动调用
*/
//http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#login
//通过在index.html的后面添加#login即可访问showLogin里的方法。
//这个可认为是深链接。我们可以将链接的任意部分发送出去,当这个链接被单击时候页面会加载到正确的位置。
//而不是应用程序的初始位置。
'login': 'showLogin',
//:id是参数
//http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#user/234
//即可把234当做参数传递给shouUserById这个函数
'user/:id': 'showUserById',
//包含两个参数id,format,
//http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#products/12/abc
//即可把12和abc当做参数传递给showProductInFormat函数
'products/:id/:format': 'showProductInFormat',
//路由进阶
/* 路由进阶产生原因:
正常情况下 路由中的通配符可以匹配任意连续的字母和数字字符串。
* 比如"products/:id/edit"这个路由可以匹配"#products/123/edit",
* 但是却不能匹配"#products/a ,fd.sd/edit",后面这个url包含了一些非法字符(空格,逗号,点号);
* 传参需求:
* 但是有时候我们还是需要路由能够匹配类似的url,比如我们的url包含一个文件名,我们想把它取出来。
* 路由进阶解决办法:
* 也就是说可以使用一个包含了action属性的配置对象来取代action字符串。
* 除此之外,我们给这这个对象添加一个conditions属性,
* 这个属性定义了:filename这个参数可以匹配英文数字、阿拉伯数字外加一个英文点号。
* 这样我们的路由现在就可以匹配像http://myapp.com/#file/someFile.jpg这样的url了,
* 它会把someFile.jpg作为参数传递给控制器的showFile函数。
* //http://localhost:8080/NetUserPerception/test/myjs/mvc/index.html#file/someFile.jpg
*/
'file/:filename': {
action: 'showFile',
conditions: {
':filename': "[0-9a-zA-Z\.]+"
}
}
},
refs:{//可以使用itemId或者选择器进行查找过滤
conView:"#controllerView",
tabOneApple:"button[action=tabOneApple]",
//查找button中action是tabOneApple的按钮
infoPanel: {
selector: 'tabpanel panel[name=fish] textfield',
//查找 tabpanel中item的name是fish的这个tab,tab的items中是否含有xtype是textfield的
//如果不含有则根据下面的xtype和autoCreate自动创建textfield组件
xtype: 'textfield',
autoCreate: true
}
},
control:{
tabOneApple: {
tap: 'doTabOneApple'
},
'button[action=tabOneBanana]': {
tap: 'doTabOneBanana'
}
},
},
showLogin:function(){
// this.getConView().addComponent("小苹果");
// this.getConView().items.getAt(0).add({
// xtype:"textfield",
// label:"ssss"
// })
},
showUserById:function(id){
console.log("id=="+id)
},
showProductInFormat:function(id,format){
console.log("id=="+id+",format=="+format);
},
showFile:function(filename){
console.log(filename)
},
doTabOneApple:function(){
var infoPanel=this.getInfoPanel();
infoPanel.setLabel("hellow")
this.getConView().items.getAt(0).add(infoPanel)
},
doTabOneBanana:function(){
this.getTabOneApple().setText("I like apple!")
}
})