sencha touch 2 toolbar按钮根据JSON动态加载。-优快云博客

本文详细介绍了如何使用JSON数据配置并实现三种不同类型的按钮组件：课程来源、分类和专业。通过model层数据模型、数据层加载JSON、view层定义布局以及控制层函数的编写，展示了数据与UI交互的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

如图3个toolbar 分别加载按钮

model层数据模型

model/buttons.js

config: {
fields: [
'buttontype', //BUTTON类型
'name' //按钮名称
]
}

JSON的数据

store/liblist.json

buttons:[

{buttontype:'coursesource',name:'清华大学'},
{buttontype:'coursesource',name:'北京大学'},
{buttontype:'coursesource',name:'中国人民大学'},
{buttontype:'coursesource',name:'北京师范大学'},
{buttontype:'classification',name:'婴幼儿教育'},
{buttontype:'classification',name:'中小学教育'},
{buttontype:'classification',name:'高等教育'},
{buttontype:'classification',name:'职业教育'},
{buttontype:'classification',name:'成人考试'},
{buttontype:'classification',name:'社区教育'},
{buttontype:'classification',name:'干部学习'},
{buttontype:'classification',name:'农村教育'},
{buttontype:'classification',name:'老年人教育'},
{buttontype:'professional',name:'哲学'},
{buttontype:'professional',name:'经济学'},
{buttontype:'professional',name:'管理学'},
{buttontype:'professional',name:'工学'},
{buttontype:'professional',name:'法学'},
{buttontype:'professional',name:'文学'},
{buttontype:'professional',name:'历史学'},
{buttontype:'professional',name:'理学'},
{buttontype:'professional',name:'教育学'},
{buttontype:'professional',name:'医学'},
{buttontype:'professional',name:'农学'},
{buttontype:'professional',name:'军事学'}

]

数据层加载JSON

store/buttons.js

proxy:{
type:'ajax',
url : 'app/store/liblist.json',
reader:{
type:'json',
rootProperty: 'buttons'
}
},

view层定义三个toolbar以及其ID （布局代码略）

view/courselib/Index.js

{
xtype:'toolbar',
items:[
{
id:'coursesourcebutton',
xtype:'segmentedbutton'
}
]

},
{
xtype:'toolbar',
items:[
{
id:'classificationbutton',
xtype:'segmentedbutton'
}
]
},
{
xtype:'toolbar',
items:[
{
id:'professionalbutton',
xtype:'segmentedbutton'
}

]
}

控制层函数的编写

controller/courselib.js

config: {

refs: {
courseSourceButton:'#coursesourcebutton',

classificationButton:'#classificationbutton',

professionalButton:'#professionalbutton',

control: {

courseSourceButton:{

   initialize:'initbuttons',
}
         }
      },

initbuttons:function(){

var store = Ext.getStore('buttons'); //从buttons.js里得到数据

store.clearFilter();

store.filterBy(function(record){
var result = record.get('buttontype'); //从每个数据里得到‘buttontype’属性的值
if ( result== 'coursesource')
{
this.getCourseSourceButton().add(
{
text:record.get('name') //如果值符合判断，添加按钮，按钮TEXT为record得到的name值

});
}
else if ( result == 'classification')
{
this.getClassificationButton().add(
{
text:record.get('name')
});
}
else if ( result == 'professional')
{
this.getProfessionalButton().add(
{
text:record.get('name')
});
}
return true;
},this); //this是filterBy函数的作用域，一定要作用域到this上，如果不用this,默认的是store

},