|
|
@@ -2,127 +2,129 @@ Ext.define('saas.view.home.InfoCard', {
|
|
|
extend: 'Ext.panel.Panel',
|
|
|
xtype: 'infocard',
|
|
|
|
|
|
- latyou: 'fit',
|
|
|
+ id: 'infocard',
|
|
|
|
|
|
- initComponent: function() {
|
|
|
- var me = this;
|
|
|
+ requires: [
|
|
|
+ 'Ext.layout.container.Card'
|
|
|
+ ],
|
|
|
|
|
|
- var view = Ext.create('Ext.view.View', {
|
|
|
- store : Ext.create('Ext.data.Store', {
|
|
|
- fields: ['title', 'content', 'color'],
|
|
|
- data: me.infoData,
|
|
|
- }),
|
|
|
- tpl: new Ext.XTemplate([
|
|
|
- '<div class="x-row">',
|
|
|
- '<tpl for=".">',
|
|
|
- '<div class="x-col">',
|
|
|
- '<div>',
|
|
|
- '<div class="x-box ',
|
|
|
- '<tpl if="color"> x-bg-{color}</tpl>',
|
|
|
- '<tpl else"> x-bg-default</tpl>',
|
|
|
- '">',
|
|
|
- '<h3>{title}</h3>',
|
|
|
- '<p>{content}</p>',
|
|
|
- '</div>',
|
|
|
- '</div>',
|
|
|
- '</div>',
|
|
|
- '</tpl>',
|
|
|
- '</div>'
|
|
|
- ]),
|
|
|
- itemSelector: 'div.x-info-card-body',
|
|
|
- });
|
|
|
+ BaseUtil: Ext.create('saas.util.BaseUtil'),
|
|
|
+
|
|
|
+ layout: 'card',
|
|
|
+ cardTpl: [
|
|
|
+ '<div class="x-row">',
|
|
|
+ '<tpl for=".">',
|
|
|
+ '<div class="x-col">',
|
|
|
+ '<div>',
|
|
|
+ '<div class="x-box ',
|
|
|
+ '<tpl if="color"> x-bg-{color}</tpl>',
|
|
|
+ '<tpl else"> x-bg-default</tpl>',
|
|
|
+ '">',
|
|
|
+ '<h3>{title}</h3>',
|
|
|
+ '<p>{content}</p>',
|
|
|
+ '</div>',
|
|
|
+ '</div>',
|
|
|
+ '</div>',
|
|
|
+ '</tpl>',
|
|
|
+ '</div>'
|
|
|
+ ],
|
|
|
+
|
|
|
+ initComponent: function () {
|
|
|
+ var me = this;
|
|
|
|
|
|
Ext.apply(me, {
|
|
|
userCls: 'x-info-card ' + me.userCls,
|
|
|
- items: [{
|
|
|
- xtype: 'button',
|
|
|
+ lbar: [{
|
|
|
+ itemId: 'card-prev',
|
|
|
cls: 'x-scroller-button x-scroller-button-left',
|
|
|
- // iconCls: 'x-sa sa-arrows-left',
|
|
|
- disabled: true,
|
|
|
handler: function() {
|
|
|
- me.scrollBody(1);
|
|
|
- }
|
|
|
- }, view, {
|
|
|
- xtype: 'button',
|
|
|
+ me. showPrevious();
|
|
|
+ },
|
|
|
+ disabled: true
|
|
|
+ }],
|
|
|
+ rbar: [{
|
|
|
+ itemId: 'card-next',
|
|
|
cls: 'x-scroller-button x-scroller-button-right',
|
|
|
- // iconCls: 'x-sa sa-arrows-right',
|
|
|
handler: function() {
|
|
|
- me.scrollBody(-1);
|
|
|
+ me.showNext();
|
|
|
}
|
|
|
- }]
|
|
|
+ }],
|
|
|
+ items: [],
|
|
|
});
|
|
|
|
|
|
me.callParent(arguments);
|
|
|
},
|
|
|
|
|
|
- listeners: {
|
|
|
- boxready: function(th) {
|
|
|
- var list = Ext.fly(th.items.items[1].el.dom);
|
|
|
- var listWidth = Number(list.getStyle('width').replace('px', ''));
|
|
|
- var bodyWidth = th.body.getBox().width;
|
|
|
- var btns = th.query('button');
|
|
|
-
|
|
|
- if(listWidth <= (bodyWidth-88)) {
|
|
|
- btns[0].setVisible(false);
|
|
|
- btns[1].setVisible(false);
|
|
|
- return;
|
|
|
+ addCardItems: function(infoData) {
|
|
|
+ var me = this,
|
|
|
+ p = me.up('home'),
|
|
|
+ // viewModel = p.getViewModel(),
|
|
|
+ // infoData = viewModel.get('infoData'),
|
|
|
+ datas = [],
|
|
|
+ items = [];
|
|
|
+ size = Math.ceil(me.body.el.getBox().width / 235);
|
|
|
+
|
|
|
+ me.removeAll();
|
|
|
+ for(var x = 0; x < infoData.length;) {
|
|
|
+ var d = [];
|
|
|
+ for(var y = 0; y < size && x < infoData.length; y++) {
|
|
|
+ d.push(infoData[x]);
|
|
|
+ x++;
|
|
|
}
|
|
|
+ datas.push(d);
|
|
|
+ }
|
|
|
|
|
|
- Ext.fly(th.body).on('mousewheel', function() {
|
|
|
- var ev = window.event;
|
|
|
- var delta = ev.wheelDelta;
|
|
|
+ Ext.Array.each(datas, function(d, i) {
|
|
|
|
|
|
- if(ev.preventDefault) {
|
|
|
- ev.preventDefault();
|
|
|
- }
|
|
|
- else {
|
|
|
- ev.cancel=true;
|
|
|
- }
|
|
|
- th.scrollBody(delta/120);
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
+ var store = Ext.create('Ext.data.Store', {
|
|
|
+ fields: ['title', 'content', 'color'],
|
|
|
+ data: d,
|
|
|
+ });
|
|
|
|
|
|
- scrollBody: function(delta) {
|
|
|
- var me = this;
|
|
|
- var list = Ext.fly(me.items.items[1].el.dom);
|
|
|
- var marginLeft = Number(list.getStyle('marginLeft').replace('px', ''));
|
|
|
- var le = marginLeft + delta * 50;
|
|
|
- var MAX_LEN = list.getBox().width - (me.body.getBox().width - 88);
|
|
|
-
|
|
|
- if(le > 0) {
|
|
|
- le = 0;
|
|
|
- me.scrollLeftDisabled();
|
|
|
- }else if(le < -MAX_LEN) {
|
|
|
- le = -MAX_LEN;
|
|
|
- me.scrollRightDisabled();
|
|
|
- }else {
|
|
|
- me.scrollEnable();
|
|
|
- }
|
|
|
+ var view = Ext.create('Ext.view.View', {
|
|
|
+ store: store,
|
|
|
+ tpl: new Ext.XTemplate(me.cardTpl),
|
|
|
+ itemSelector: 'div.x-info-card-body',
|
|
|
+ });
|
|
|
|
|
|
- list.setStyle({
|
|
|
- marginLeft: le + 'px'
|
|
|
+ var item = {
|
|
|
+ xtype: 'panel',
|
|
|
+ id: 'card-' + i,
|
|
|
+ items: view
|
|
|
+ };
|
|
|
+ me.add(item);
|
|
|
});
|
|
|
+
|
|
|
+ if(datas.length <= 1) {
|
|
|
+ me.hidePageTrigger();
|
|
|
+ }
|
|
|
+
|
|
|
+ me.updateLayout(true);
|
|
|
},
|
|
|
-
|
|
|
- scrollLeftDisabled: function() {
|
|
|
+
|
|
|
+ hidePageTrigger: function() {
|
|
|
var me = this;
|
|
|
- var leftBtn = me.query('button')[0];
|
|
|
- leftBtn.setDisabled(true);
|
|
|
+ me.down('#card-prev').hide();
|
|
|
+ me.down('#card-next').hide();
|
|
|
},
|
|
|
|
|
|
- scrollRightDisabled: function() {
|
|
|
- var me = this;
|
|
|
- var rightBtn = me.query('button')[1];
|
|
|
- rightBtn.setDisabled(true);
|
|
|
+ showNext: function () {
|
|
|
+ this.doCardNavigation(1);
|
|
|
},
|
|
|
|
|
|
- scrollEnable: function() {
|
|
|
+ showPrevious: function (btn) {
|
|
|
+ this.doCardNavigation(-1);
|
|
|
+ },
|
|
|
+
|
|
|
+ doCardNavigation: function (incr) {
|
|
|
var me = this;
|
|
|
- var btns = me.query('button');
|
|
|
+ var l = me.getLayout();
|
|
|
+ var i = l.activeItem.id.split('card-')[1];
|
|
|
+ var c = me.items.items.length;
|
|
|
+ var next = parseInt(i, 10) + incr;
|
|
|
+ l.setActiveItem(next);
|
|
|
|
|
|
- for(var i = 0; i < btns.length; i ++) {
|
|
|
- btns[i].setDisabled(false);
|
|
|
- }
|
|
|
+ me.down('#card-prev').setDisabled(next === 0);
|
|
|
+ me.down('#card-next').setDisabled(next === (c-1));
|
|
|
}
|
|
|
});
|