Skip to content

T
todomvc
Commit 8a341229 authored by goldledoigt's avatar goldledoigt
Browse files
Options

MVC design

parent 67ac6f96
Hide whitespace changes
Inline Side-by-side
Showing with 292 additions and 45 deletions
todo-example/extjs/index.html
View file @ 8a341229
......@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExtJS</title>
......@@ -15,31 +15,22 @@
<body>
<div class="container">
<div class="content">
<!-- <div class="content">
<h1>Todos</h1>
<div id="textfield"></div>
<div id="list">
<!-- <div class="row">
<input type="checkbox" />
<span>fdslf fdsqf,dmqf dqfdq,fdlmqsfd</span>
</div>
<div class="row">
<input type="checkbox" />
<span>fdslf fdsqf,dmqf dqfdq,fdlmqsfd</span>
</div> -->
</div>
<div id="list"></div>
<div class="toolbar">
<div id="clearbutton"></div>
<div id="info"></div>
<div style="clear: both;"></div>
</div>
</div>
</div> -->
<div class="credits">
Credits:<br /><a href="http://revolunet.com/">Revolunet</a>
</div>
</div>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>
<script src="js/app.js"></script>
<script src="js/app2.js"></script>
</body>
</html>
todo-example/extjs/js/app.js
View file @ 8a341229
......@@ -21,22 +21,14 @@ Ext.onReady(function() {
Ext.define('Todo.view.InfoContainer' , {
renderTo: 'info',
alias : 'widget.infoContainer',
extend: 'Ext.container.Container',
initComponent: function() {
console.log("initComponent", this, arguments);
this.callParent(arguments);
}
extend: 'Ext.container.Container'
});
Ext.define('Todo.view.ClearButton' , {
extend: 'Ext.Button',
renderTo: 'clearbutton',
text: 'Clear completed',
alias : 'widget.clearButton',
extend: 'Ext.Button',
initComponent: function() {
console.log("initComponent", this, arguments);
this.callParent(arguments);
}
alias : 'widget.clearButton'
});
Ext.define('Todo.view.TextField' , {
......@@ -45,11 +37,7 @@ Ext.onReady(function() {
enableKeyEvents: true,
alias : 'widget.textField',
extend: 'Ext.form.TextField',
emptyText: 'What needs to be done?',
initComponent: function() {
console.log("initComponent", this, arguments);
this.callParent(arguments);
}
emptyText: 'What needs to be done?'
});
Ext.define('Todo.view.List' , {
......@@ -58,19 +46,14 @@ Ext.onReady(function() {
renderTo: 'list',
itemSelector: 'div.row',
extend: 'Ext.view.View',
alias : 'widget.taskList',
// emptyText: 'No images available',
initComponent: function() {
console.log("initComponent", this, arguments);
this.callParent(arguments);
}
alias : 'widget.taskList'
});
Ext.define('Todo.controller.Tasks', {
extend: 'Ext.app.Controller',
views: ['TextField', 'List', 'ClearButton', 'InfoContainer'],
init: function() {
console.log('controller init');
this.control({
'textField': {
keyup: this.onTextFieldKeyup
......@@ -83,25 +66,26 @@ Ext.onReady(function() {
}
});
},
onTextFieldKeyup: function(field, event) {
var value = field.getValue();
if (event.button === 12 && value !== '') {
console.log("onTextFieldKeyup", this, arguments);
this.addTask(value);
store.add({label: value, checked: false});
this.updateInfo();
field.reset();
}
},
onItemClick: function(list, record, el, index, event) {
console.log("onItemClick", this, arguments);
this.toggleTask(record, el);
this.updateInfo();
},
onClearButtonClick: function() {
console.log("onClearButtonClick", this, arguments);
this.deleteCompletedTasks();
this.updateInfo();
},
deleteCompletedTasks: function() {
var records = [];
store.each(function(record) {
......@@ -111,10 +95,7 @@ Ext.onReady(function() {
});
store.remove(records);
},
addTask: function(label) {
console.log("addTask", this, arguments);
store.add({label: label, checked: false});
},
toggleTask: function(record, el) {
if (record.get('checked')) {
record.set('checked', false);
......@@ -124,6 +105,7 @@ Ext.onReady(function() {
Ext.fly(el).down('span').addCls('checked');
}
},
updateInfo: function() {
if (!this.infoContainer) {
this.infoContainer = Ext.widget('infoContainer');
......
todo-example/extjs/js/app2.js 0 → 100644
View file @ 8a341229
Ext.onReady(function() {
// var store = Ext.create('Ext.data.Store', {
// fields: ['label', 'checked'],
// data: [
// {label: 'task one', checked: false},
// {label: 'task two', checked: true}
// ]
// });
//
// var tpl = Ext.create('Ext.XTemplate',
// '<tpl for=".">',
// '<div class="row">',
// '<input type="checkbox" {[values.checked ? "checked" : ""]} />',
// '<span class="{[values.checked ? "checked" : ""]}">{label}</span>',
// '</div>',
// '</tpl>',
// {compiled: true}
// );
//
// Ext.define('Todo.view.InfoContainer' , {
// renderTo: 'info',
// alias : 'widget.infoContainer',
// extend: 'Ext.container.Container'
// });
//
// Ext.define('Todo.view.ClearButton' , {
// extend: 'Ext.Button',
// renderTo: 'clearbutton',
// text: 'Clear completed',
// alias : 'widget.clearButton'
// });
//
// Ext.define('Todo.view.TextField' , {
// width: 466,
// renderTo: 'textfield',
// enableKeyEvents: true,
// alias : 'widget.textField',
// extend: 'Ext.form.TextField',
// emptyText: 'What needs to be done?'
// });
//
// Ext.define('Todo.view.List' , {
// tpl: tpl,
// store: store,
// renderTo: 'list',
// itemSelector: 'div.row',
// extend: 'Ext.view.View',
// alias : 'widget.taskList'
// });
//
// Ext.define('Todo.controller.Tasks', {
// extend: 'Ext.app.Controller',
// views: ['TextField', 'List', 'ClearButton', 'InfoContainer'],
//
// init: function() {
// this.control({
// 'textField': {
// keyup: this.onTextFieldKeyup
// },
// 'taskList': {
// itemclick: this.onItemClick
// },
// 'clearButton': {
// click: this.onClearButtonClick
// }
// });
// },
//
// onTextFieldKeyup: function(field, event) {
// var value = field.getValue();
// if (event.button === 12 && value !== '') {
// store.add({label: value, checked: false});
// this.updateInfo();
// field.reset();
// }
// },
//
// onItemClick: function(list, record, el, index, event) {
// this.toggleTask(record, el);
// this.updateInfo();
// },
//
// onClearButtonClick: function() {
// this.deleteCompletedTasks();
// this.updateInfo();
// },
//
// deleteCompletedTasks: function() {
// var records = [];
// store.each(function(record) {
// if (record.get('checked')) {
// records.push(record);
// }
// });
// store.remove(records);
// },
//
// toggleTask: function(record, el) {
// if (record.get('checked')) {
// record.set('checked', false);
// Ext.fly(el).down('span').removeCls('checked');
// } else {
// record.set('checked', true);
// Ext.fly(el).down('span').addCls('checked');
// }
// },
//
// updateInfo: function() {
// if (!this.infoContainer) {
// this.infoContainer = Ext.widget('infoContainer');
// }
// var records = store.queryBy(function(record) {
// return !record.get('checked');
// }),
// count = records.getCount();
//
// if (count) {
// this.infoContainer.update(count + ' item' + (count > 1 ? 's' : '') + ' left.')
// } else {
// this.infoContainer.update('');
// }
// }
// });
Ext.Loader.setConfig({enabled:true});
// Ext.ns('Todo.store');
//
// Todo.store.Tasks = Ext.create('Ext.data.Store', {
// fields: ['label', 'checked'],
// data: [
// {label: 'task one', checked: false},
// {label: 'task two', checked: true}
// ]
// });
Ext.application({
name: 'Todo',
appFolder: 'js',
controllers: ['Tasks'],
launch: function() {
Ext.create('Ext.container.Container', {
margin: 20,
renderTo: document.body,
items: [{
xtype: 'container',
html: '<h1>Todo</h1>'
}, {
xtype: 'taskField'
}, {
xtype: 'taskList'
}, {
xtype: 'taskToolbar'
}]
});
}
});
});
todo-example/extjs/js/controller/Tasks.js 0 → 100644
View file @ 8a341229
Ext.define('Todo.controller.Tasks', {
extend: 'Ext.app.Controller',
stores: ['Tasks'],
// models: ['Task'],
views: ['TaskField', 'TaskList', 'TaskToolbar'],
refs: [
{ref: 'taskList', selector: 'taskList'},
{ref: 'taskToolbar', selector: 'taskToolbar'}
],
init: function() {
this.control({
'taskField': {
keyup: this.onTaskFieldKeyup
},
'taskList': {
itemclick: this.onListItemClick
},
'taskToolbar > button': {
click: this.onClearButtonClick
}
});
this.getTasksStore().on({
scope: this,
update: this.onStoreDataChanged,
datachanged: this.onStoreDataChanged
});
},
onTaskFieldKeyup: function(field, event) {
var value = field.getValue();
if (event.button === 12 && value !== '') {
var store = this.getTasksStore();
store.add({label: value, checked: false});
field.reset();
}
},
onListItemClick: function(list, record, el) {
record.set('checked', !record.get('checked'));
},
onClearButtonClick: function() {
var records = [],
store = this.getTasksStore();
store.each(function(record) {
if (record.get('checked')) {
records.push(record);
}
});
store.remove(records);
},
onStoreDataChanged: function() {
var info = '',
store = this.getTasksStore(),
container = this.getTaskToolbar().items.first(),
records = store.queryBy(function(record) {
return !record.get('checked');
}),
count = records.getCount();
if (count) {
info = count + ' item' + (count > 1 ? 's' : '') + ' left.';
}
container.update(info);
}
});
todo-example/extjs/js/store/Tasks.js 0 → 100644
View file @ 8a341229
Ext.define('Todo.store.Tasks', {
extend: 'Ext.data.Store',
fields: ['label', 'checked'],
data: [
{label: 'task one', checked: false},
{label: 'task two', checked: true}
]
});
todo-example/extjs/js/view/TaskField.js 0 → 100644
View file @ 8a341229
Ext.define('Todo.view.TaskField' , {
// width: 466,
enableKeyEvents: true,
alias : 'widget.taskField',
extend: 'Ext.form.TextField',
emptyText: 'What needs to be done?'
});
todo-example/extjs/js/view/TaskList.js 0 → 100644
View file @ 8a341229
Ext.define('Todo.view.TaskList' , {
store: 'Tasks',
itemSelector: 'div.row',
extend: 'Ext.view.View',
alias : 'widget.taskList',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="row">',
'<input type="checkbox" {[values.checked ? "checked" : ""]} />',
'<span class="{[values.checked ? "checked" : ""]}">{label}</span>',
'</div>',
'</tpl>',
{compiled: true}
)
});
todo-example/extjs/js/view/TaskToolbar.js 0 → 100644
View file @ 8a341229
Ext.define('Todo.view.TaskToolbar' , {
alias : 'widget.taskToolbar',
extend: 'Ext.Toolbar',
items: [{
xtype: 'container',
html: '1 item left.'
}, '->', {
xtype: 'button',
text: 'Clear completed'
}]
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7