Skip to content

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

localstorage

parent 8a341229
Hide whitespace changes
Inline Side-by-side
Showing with 78 additions and 336 deletions
todo-example/extjs/css/style.css
View file @ c43aa361
body {
margin: 0;
padding: 0;
/* font-size: 14px;*/
/* line-height: 1.4em;*/
background-color: #EEEEEE;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 520px;
margin: 0 auto;
div, h1, span {
outline: none;
}
.content {
#todo {
width: 480px;
margin: 0 auto 40px;
padding: 20px;
color: #333333;
background-color: white;
......@@ -29,7 +28,6 @@ h1 {
.credits {
color: #999;
margin-top: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
......@@ -53,24 +51,31 @@ input[type="text"] {
}
.row input[type="checkbox"] {
/* margin-top: -3px;*/
/* position: absolute;*/
vertical-align: middle;
}
.row span {
cursor: pointer;
}
.row span.checked {
text-decoration: line-through;
}
.toolbar {
.x-toolbar {
color: #555555;
padding: 8px 20px;
margin-top: 10px;
padding: 8px 20px;
background-color: #F4FCE8;
border-radius: 0 0 5px 5px;
border-top: 1px solid #EDEDED;
}
.toolbar button {
.x-toolbar .x-container {
height: 21px;
}
.x-toolbar button {
float: right;
width: 110px;
border: 0 none;
......@@ -82,14 +87,16 @@ input[type="text"] {
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
.toolbar .x-over button {
.x-toolbar .x-over button {
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
.toolbar .x-pressed button {
top: 1px;
position: relative;
.x-toolbar .x-pressed button {
background: rgba(0, 0, 0, 0.1);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
.x-clear {
clear: both;
}
\ No newline at end of file
todo-example/extjs/index.html
View file @ c43aa361
......@@ -7,30 +7,16 @@
<title>ExtJS</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- <div class="content">
<h1>Todos</h1>
<div id="textfield"></div>
<div id="list"></div>
<div class="toolbar">
<div id="clearbutton"></div>
<div id="info"></div>
<div style="clear: both;"></div>
</div>
</div> -->
<div class="credits">
Credits:<br /><a href="http://revolunet.com/">Revolunet</a>
</div>
<div id="todo"></div>
<div class="credits">
Credits:<br /><a href="http://revolunet.com/">Revolunet</a>
</div>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>
<script src="js/app2.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>
todo-example/extjs/js/app.js
View file @ c43aa361
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.application({
name: 'Todo',
appFolder: 'js',
controllers: ['Tasks'],
launch: function() {
console.log("launch", this, arguments);
var list = Ext.widget('taskList');
var textfield = Ext.widget('textField');
var clearButton = Ext.widget('clearButton');
this.controllers.first().updateInfo();
Ext.create('Ext.container.Container', {
renderTo: 'todo',
items: [{
xtype: 'container',
html: '<h1>Todos</h1>'
}, {
xtype: 'taskField'
}, {
xtype: 'taskList'
}, {
xtype: 'taskToolbar'
}]
});
}
});
......
todo-example/extjs/js/app2.js deleted 100644 → 0
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
View file @ c43aa361
Ext.define('Todo.controller.Tasks', {
extend: 'Ext.app.Controller',
models: ['Task'],
stores: ['Tasks'],
// models: ['Task'],
extend: 'Ext.app.Controller',
views: ['TaskField', 'TaskList', 'TaskToolbar'],
refs: [
......@@ -35,11 +39,14 @@ Ext.define('Todo.controller.Tasks', {
var store = this.getTasksStore();
store.add({label: value, checked: false});
field.reset();
store.sync();
}
},
onListItemClick: function(list, record, el) {
record.set('checked', !record.get('checked'));
record.store.sync();
record.commit();
},
onClearButtonClick: function() {
......@@ -52,12 +59,14 @@ Ext.define('Todo.controller.Tasks', {
}
});
store.remove(records);
store.sync();
},
onStoreDataChanged: function() {
var info = '',
store = this.getTasksStore(),
container = this.getTaskToolbar().items.first(),
toolbar = this.getTaskToolbar(),
container = toolbar.items.last(),
records = store.queryBy(function(record) {
return !record.get('checked');
}),
......@@ -68,6 +77,7 @@ Ext.define('Todo.controller.Tasks', {
}
container.update(info);
toolbar.setVisible(store.getCount());
}
});
todo-example/extjs/js/model/Task.js
View file @ c43aa361
Ext.define('Todo.model.Task', {
extend: 'Ext.data.Model',
fields: ['id', 'label', {name: 'checked', type: 'boolean'}],
proxy: {
type: 'localstorage',
id: 'todo'
}
});
todo-example/extjs/js/store/Tasks.js
View file @ c43aa361
Ext.define('Todo.store.Tasks', {
extend: 'Ext.data.Store',
fields: ['label', 'checked'],
data: [
{label: 'task one', checked: false},
{label: 'task two', checked: true}
]
autoLoad: true,
model: 'Todo.model.Task',
extend: 'Ext.data.Store'
// data: [
// {label: 'task one', checked: false},
// {label: 'task two', checked: true}
// ]
});
todo-example/extjs/js/view/TaskField.js
View file @ c43aa361
Ext.define('Todo.view.TaskField' , {
// width: 466,
width: 466,
enableKeyEvents: true,
alias : 'widget.taskField',
extend: 'Ext.form.TextField',
......
todo-example/extjs/js/view/TaskList.js
View file @ c43aa361
Ext.define('Todo.view.TaskList' , {
store: 'Tasks',
loadMask: false,
itemSelector: 'div.row',
extend: 'Ext.view.View',
alias : 'widget.taskList',
......
todo-example/extjs/js/view/TaskToolbar.js
View file @ c43aa361
Ext.define('Todo.view.TaskToolbar' , {
alias : 'widget.taskToolbar',
hidden: true,
extend: 'Ext.Toolbar',
alias : 'widget.taskToolbar',
items: [{
xtype: 'container',
html: '1 item left.'
}, '->', {
xtype: 'button',
text: 'Clear completed'
}, {
xtype: 'container',
html: '1 item left.'
}]
});
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