Category Archives: Ext Js

Gulp run as series of tasks

// task cleanDist
gulp.task('cleanDist', function(cb) {
  return del([
    './www/js/configuration.js'
  ]);
});
// task copy-local-files: require 'cleanDist' task
gulp.task('copy-local-files', ['cleanDist'], function(cb) {
  return gulp.src('./../config/local/**/*').pipe(gulp.dest('./www'));
});
// task lint: require 'copy-local-file' task
gulp.task('lint', ['copy-local-files'], function() {
  return gulp.src(paths.js)
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('jshint-stylish'));
});

Bonus: Ionic run task before server and after serve: config in ionic.project file

{
  "name": "songpham",
  "app_id": "20002005",
  "gulpDependantTasks": [ // before serve
    "lint"
  ],
  "gulpStartupTasks": [ // after serve
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

Advertisements

Group Date, Month with Javascript Reduce

var data = [{
  date: '2015-10-30',
  title: 'jerry'
}, {
  date: '2015-10-30',
  title: 'tom'
}, {
  date: '2015-10-31',
  title: 'tom'
}, {
  date: '2015-10-31',
  title: 'tom'
}, {
  date: '2015-11-01',
  title: 'tom'
}, {
  date: '2015-11-01',
  title: 'tom'
}, {
  date: '2015-11-02',
  title: 'tom'
}, {
  date: '2015-11-02',
  title: 'tom'
}, {
  date: '2015-11-03',
  title: 'tom'
}, {
  date: '2015-11-03',
  title: 'tom'
}];

var groupsLevel1 = _.reduce(data, groupByDate, {});
var groupsLevel2 = _.reduce(groupsLevel1, groupByMonth, {});

console.log(groupsLevel2);

function groupByDate(groups, item) {
  var date = item.date;
  var group;

  if (!(date in groups)) {
    group = groups[date] = [];
  } else {
    group = groups[date];
  }

  group.push(item);
  
  return groups;
}

function groupByMonth (groups, item) {
  var date = item[0].date,
      month = date.substr(0, 7),
      group;
  if (!(month in groups)) {
    group = groups[month] = {};
  } else {
    group = groups[month];
  }
  group[date] = item;
  return groups;
}

Create a dynamic form by Javascript

function gotoAndComeback (url) {
    var f = document.createElement("form");
    f.setAttribute('method', "post");
    f.setAttribute('action', base_url + '/' + url);
    var i = document.createElement("input"); //input element, text
    i.setAttribute('type', "hidden");
    i.setAttribute('name', "url");
    i.setAttribute('value', get_full_url );
    var s = document.createElement("input"); //input element, Submit button
    s.setAttribute('type', "submit");
    s.setAttribute('value', "Submit");
    f.appendChild(i);
    f.appendChild(s);
    document.getElementsByTagName('body')[0].appendChild(f);
    f.submit();
}

Thuật toán để tránh đệ quy trong Ext Js 4

Đôi khi trong lập trình ta buộc phải dùng đệ quy để giải các bài toán về multilevel. Cứ gọi mãi 1 function cho tới khi đạt được mục đích thì thôi. Nhưng với những data lớn thì gọi đệ quy rất nguy hiểm vì sẽ gây ra stack overflow. Để giải quyết trường hợp trên, ta có thể xử lý như sau:

Ví dụ code của chúng ta là:

insertChildMultiLevel: function (rootNode, trees) {
	var node;
	Ext.each(trees, function (tree) {
		node = rootNode.appendChild(Ext.apply(Ext.clone(tree), {
			children: []
		}));
		if (Ext.isArray(tree.children)) {
			this.insertChildMultiLevel(node, tree.children);
		}
	}, this);
}

Continue reading Thuật toán để tránh đệ quy trong Ext Js 4

Ext Js 4 Tree drag drop

Để Drag drop trong tree, tốt nhất ta nên dùng drag zone và drop zone. 2 phần này khá phức tạp, nên ta cần phải cẩn thận trong từng bước thì mới hoàn thành được,

onTableViewAfterrender: function (treeView) {
	var me = this,
		treePanel = treeView.up('treepanel');
	treeView.dragZone = Ext.create('Ext.dd.DragZone', treeView.getEl(), {
		getDragData: function (e) {
			e.stopEvent();
			var sourceEl = e.getTarget(treeView.itemSelector, 10),
				record = treeView.getRecord(sourceEl),
				d;
			// just leaf can drag
			if (sourceEl && record.get('leaf')) {
				d = document.createElement('div');
				d.id = Ext.id();
				d.appendChild(document.createTextNode(record.get('text')));
				d.draggedRecord = record;
				d.sourceStore = treeView.store;
				return {
					ddel: d
				};
			}
		},
		getRepairXY: function () {
			return this.dragData.repairXY;
		}
	});
	treePanel.dropZone = Ext.create('Ext.dd.DropZone', treeView.el, {
		getTargetFromEvent: function (e) {
			var nodeHtml = e.getTarget(),
				node = treePanel.getRootNode().findChild('text', nodeHtml.textContent, true);
			return {
				node: node // this will return node target record
			};
		},
		onNodeEnter : function (target, dd, e, dragData) {
			delete this.dropOK;
			if (!target) {
				return;
			}
			if (!target.node) {
				return;
			}
			if (target.node.get('leaf')) {
				// if leaf same folder => can't drop
				if (target.node.get('parentId') === dragData.ddel.draggedRecord.get('parentId')) {
					return;
				}
			} else {
				// if folder same folder => can't drop
				if (target.node.get('id') === dragData.ddel.draggedRecord.get('parentId')) {
					return;
				}
			}
			this.dropOK = true;
			//Ext.fly(target).addCls('hospital-target-hover');
		},
		onNodeOut : function (target, dd, e, dragData) {
			//Ext.fly(target).removeCls('hospital-target-hover');
		},
		onNodeOver : function (target, dd, e, dragData) {
			return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
		},
		onNodeDrop : function (target, dd, e, dragData) {
			if (this.dropOK) {
				if (target.node.get('leaf')) {
					me.createNewReport(treeView, target.node.parentNode, dragData.ddel.draggedRecord);
				} else {
					me.createNewReport(treeView, target.node, dragData.ddel.draggedRecord);
				}
				return true;
			}
		}
	});
}

Ext Js 4 context tree menu

Mỗi treePanel khi ta rightclick vào item thì đều khởi tạo lên sự kiện itemcontextmenu, việc còn lại chỉ là hear sự kiện này và xử lý.

onShowItemContextMenu: function (treeView, node, item, index, event) {
        var itemMenu,
            menuDelete;
        itemMenu = [{
			text: 'Open Report',
			iconCls: 'new-icon',
			scope: this,
			handler: function (btn) {this.openReport(treeView, node); }
		}, {
			text: 'Delete Report',
			iconCls: 'delete-icon',
			scope: this,
			handler: function (btn) {this.deleteReport(treeView, node); }
		}];
        Ext.widget('menu', {
            plain: true,
            items: [itemMenu]
        }).showAt(event.getXY());
        event.stopEvent();
}

Convert data.store to data.treeStore Ext Js 4.0

Điểm khác nhau của 2 loại store chỉ là data, trong data.store thì model có bao nhiêu field thì nó có bấy nhiêu field. Còn trong treeStore thì ngoài những field trong model, nó còn add thêm 1 số field để đáp ứng cho tree. Quy trình như sau:
1) Tạo model:

Ext.define('Project.model.report', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        mapping: 'id',
        type: 'int'
    }, {
        name: 'parentId',
        mapping: 'parentId',
        type: 'int'
    }, {
        name: 'name',
        mapping: 'name',
        type: 'string'
    }, {
        name: 'leaf', // need that because can create folder
        mapping: 'leaf',
        type: 'boolean'
    }]
});

Continue reading Convert data.store to data.treeStore Ext Js 4.0

Cách để split string thành int trong Ext js 4

Thường khi split 1 chuỗi “1, 2, 3” như sau:

String("1,2,3").split(",")

Thì kết quả sẽ trả về cho ta 1 mảng [“1”, “2”, “3”], như thế ta phải mất công convert từ string qua int nữa. Để kết quả trả về là int thì ta sẽ dùng hàm map.

Ext.Array.map(String("1,2,3").split(','), function (value) { return parseInt(value, 10); })

Code này cũng có thể dùng cho các ngôn ngữ khác như PHP, jquery, js, …

Hàm kiểm tra xem array A có trong array B không trong ext js 4

Đầu tiên chạy hết mảng A, nếu item trong mảng A có tồn tại trong mảng B thì sẽ tăng biến đếm. Kết thúc vòng lặp, nếu biến đếm == với số length của array A thì có tồn tại, ngược lại thì không.

function arrayInArrayJS(arrayA, arrayB) { // array1: item, array2: holder
	countValid = 0;
	Ext.each(arrayA, function (item) {
		if (Ext.Array.contains(arrayB, item)) {
			countValid++;
		}
	});
	if (arrayA.length === countValid) {
		return true;
	}
	return false;
}
arrayInArrayJS([1,2,3,4,8], [1,2,3,4,5,6,7]);

Add CSS pseudo classes cho Dom của Ext js 4

Do ext js 4 khuyến cáo không dùng !DOCTYPE (đọc chi tiết tại đây), do đó ta không thể add pseudo classes vào html như bình thường được (VD: a:link, a:hover…). Do vậy muốn add vào ta phải dùng Ext Js để add. Vậy để add được ta phải qua 3 bước.

Bước 1: Gọi hàm ‘initHover’ với tham số là dom:

this.initHover(billingDashboard.getEl());

Continue reading Add CSS pseudo classes cho Dom của Ext js 4