Skip to content

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

add extjs example

parent b304ba29
Hide whitespace changes
Inline Side-by-side
Showing with 296 additions and 0 deletions
todo-example/extjs/css/style.css 0 → 100644
View file @ 67ac6f96
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;
}
.content {
padding: 20px;
color: #333333;
background-color: white;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
h1 {
margin: 0;
font-size: 36px;
text-align: center;
padding: 20px 0 30px;
}
.credits {
color: #999;
margin-top: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.credits a, .credits a:visited {
color: #888;
}
input[type="text"] {
padding: 6px;
margin: 0 auto;
font-size: 24px;
border: 1px solid #999999;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
}
.row {
font-size: 1.7em;
padding: 20px 0 10px;
border-bottom: 1px solid #CCCCCC;
}
.row input[type="checkbox"] {
/* margin-top: -3px;*/
/* position: absolute;*/
}
.row span.checked {
text-decoration: line-through;
}
.toolbar {
color: #555555;
padding: 8px 20px;
margin-top: 10px;
background-color: #F4FCE8;
border-radius: 0 0 5px 5px;
border-top: 1px solid #EDEDED;
}
.toolbar button {
float: right;
width: 110px;
border: 0 none;
color: #555555;
cursor: pointer;
border-radius: 12px;
padding: 3px 10px 4px;
background: rgba(0, 0, 0, 0.1);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
.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;
background: rgba(0, 0, 0, 0.1);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
\ No newline at end of file
todo-example/extjs/index.html 0 → 100644
View file @ 67ac6f96
<!doctype html>
<html>
<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">
<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 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 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>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>
<script src="js/app.js"></script>
</body>
</html>
todo-example/extjs/js/app.js 0 → 100644
View file @ 67ac6f96
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',
initComponent: function() {
console.log("initComponent", this, arguments);
this.callParent(arguments);
}
});
Ext.define('Todo.view.ClearButton' , {
renderTo: 'clearbutton',
text: 'Clear completed',
alias : 'widget.clearButton',
extend: 'Ext.Button',
initComponent: function() {
console.log("initComponent", this, arguments);
this.callParent(arguments);
}
});
Ext.define('Todo.view.TextField' , {
width: 466,
renderTo: 'textfield',
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);
}
});
Ext.define('Todo.view.List' , {
tpl: tpl,
store: store,
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);
}
});
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
},
'taskList': {
itemclick: this.onItemClick
},
'clearButton': {
click: this.onClearButtonClick
}
});
},
onTextFieldKeyup: function(field, event) {
var value = field.getValue();
if (event.button === 12 && value !== '') {
console.log("onTextFieldKeyup", this, arguments);
this.addTask(value);
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) {
if (record.get('checked')) {
records.push(record);
}
});
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);
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.application({
name: 'Todo',
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();
}
});
});
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