Skip to content

T
todomvc
Commit a053160d authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

ExtJS: Tab indentation

parent 292026bb
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 260 deletions
labs/architecture-examples/extjs/js/controller/Tasks.js
View file @ a053160d
Ext.define('Todo.controller.Tasks', {
models: ['Task'],
stores: ['Tasks'],
extend: 'Ext.app.Controller',
views: ['TaskField', 'TaskList', 'TaskToolbar'],
refs: [
{ref: 'taskList', selector: 'taskList'},
{ref: 'taskToolbar', selector: 'taskToolbar'},
{ref: 'checkAllBox', selector: 'checkAllBox'}
],
init: function() {
this.control({
'taskField': {
keyup: this.onTaskFieldKeyup
},
'taskList': {
todoChecked: this.onTodoChecked,
itemdblclick: this.onTodoDblClicked,
onTaskEditKeyup: this.onTaskEditKeyup,
todoRemoveSelected: this.onTodoRemoveSelected
},
'completeButton': {
click: this.onClearButtonClick
},
'checkAllBox': {
click: this.onCheckAllClick
}
});
this.getTasksStore().on({
scope: this,
update: this.onStoreDataChanged,
datachanged: this.onStoreDataChanged
});
},
onTaskFieldKeyup: function(field, event) {
var ENTER_KEY_CODE = 13;
var value = field.getValue().trim();
if (event.keyCode === ENTER_KEY_CODE && value !== '') {
var store = this.getTasksStore();
store.add({label: value, checked: false});
field.reset();
store.sync();
}
},
onTodoChecked: function(record) {
record.set('checked', !record.get('checked'));
record.store.sync();
record.commit();
},
onTodoDblClicked: function (list, record, el) {
record.set('editing', true);
record.store.sync();
record.commit();
},
onTodoRemoveSelected: function (record) {
var store = this.getTasksStore();
store.remove(record);
store.sync();
},
onTaskEditKeyup: function (event, record, extEl) {
var ENTER_KEY_CODE = 13;
if (event.keyCode === ENTER_KEY_CODE) {
this.finalizeTaskEdit(extEl, record);
}
},
finalizeTaskEdit: function (extEl, record) {
var value = extEl.getValue().trim();
if (!value) {
var store = this.getTasksStore();
store.remove(record);
store.sync();
} else {
record.set('label', value);
record.set('editing', false);
record.store.sync();
record.commit();
}
},
onClearButtonClick: function() {
var records = [],
store = this.getTasksStore();
store.each(function(record) {
if (record.get('checked')) {
records.push(record);
}
});
store.remove(records);
store.sync();
},
onCheckAllClick: function(checked) {
var store = this.getTasksStore();
store.each(function(record) {
record.set('checked', checked);
});
store.sync();
},
onStoreDataChanged: function() {
var info = '', text = '',
store = this.getTasksStore(),
totalCount = store.getCount(),
toolbar = this.getTaskToolbar(),
button = toolbar.items.first(),
container = toolbar.items.last(),
records = store.queryBy(function(record) {
return !record.get('checked');
}),
count = records.getCount(),
checkedCount = totalCount - count;
if (count) {
info = '<b>' + count + '</b> item' + (count > 1 ? 's' : '') + ' left.';
}
if (checkedCount) {
text = 'Clear '+ checkedCount +' completed item' + (checkedCount > 1 ? 's' : '');
}
this.getCheckAllBox().updateCheckedState(totalCount, checkedCount);
container.update(info);
button.setText(text);
button.setVisible(checkedCount);
toolbar.setVisible(totalCount);
}
models: ['Task'],
stores: ['Tasks'],
extend: 'Ext.app.Controller',
views: ['TaskField', 'TaskList', 'TaskToolbar'],
refs: [
{ref: 'taskList', selector: 'taskList'},
{ref: 'taskToolbar', selector: 'taskToolbar'},
{ref: 'checkAllBox', selector: 'checkAllBox'}
],
init: function() {
this.control({
'taskField': {
keyup: this.onTaskFieldKeyup
},
'taskList': {
todoChecked: this.onTodoChecked,
itemdblclick: this.onTodoDblClicked,
onTaskEditKeyup: this.onTaskEditKeyup,
todoRemoveSelected: this.onTodoRemoveSelected
},
'completeButton': {
click: this.onClearButtonClick
},
'checkAllBox': {
click: this.onCheckAllClick
}
});
this.getTasksStore().on({
scope: this,
update: this.onStoreDataChanged,
datachanged: this.onStoreDataChanged
});
},
onTaskFieldKeyup: function(field, event) {
var ENTER_KEY_CODE = 13;
var value = field.getValue().trim();
if (event.keyCode === ENTER_KEY_CODE && value !== '') {
var store = this.getTasksStore();
store.add({label: value, checked: false});
field.reset();
store.sync();
}
},
onTodoChecked: function(record) {
record.set('checked', !record.get('checked'));
record.store.sync();
record.commit();
},
onTodoDblClicked: function (list, record, el) {
record.set('editing', true);
record.store.sync();
record.commit();
},
onTodoRemoveSelected: function (record) {
var store = this.getTasksStore();
store.remove(record);
store.sync();
},
onTaskEditKeyup: function (event, record, extEl) {
var ENTER_KEY_CODE = 13;
if (event.keyCode === ENTER_KEY_CODE) {
this.finalizeTaskEdit(extEl, record);
}
},
finalizeTaskEdit: function (extEl, record) {
var value = extEl.getValue().trim();
if (!value) {
var store = this.getTasksStore();
store.remove(record);
store.sync();
} else {
record.set('label', value);
record.set('editing', false);
record.store.sync();
record.commit();
}
},
onClearButtonClick: function() {
var records = [],
store = this.getTasksStore();
store.each(function(record) {
if (record.get('checked')) {
records.push(record);
}
});
store.remove(records);
store.sync();
},
onCheckAllClick: function(checked) {
var store = this.getTasksStore();
store.each(function(record) {
record.set('checked', checked);
});
store.sync();
},
onStoreDataChanged: function() {
var info = '', text = '',
store = this.getTasksStore(),
totalCount = store.getCount(),
toolbar = this.getTaskToolbar(),
button = toolbar.items.first(),
container = toolbar.items.last(),
records = store.queryBy(function(record) {
return !record.get('checked');
}),
count = records.getCount(),
checkedCount = totalCount - count;
if (count) {
info = '<b>' + count + '</b> item' + (count > 1 ? 's' : '') + ' left.';
}
if (checkedCount) {
text = 'Clear '+ checkedCount +' completed item' + (checkedCount > 1 ? 's' : '');
}
this.getCheckAllBox().updateCheckedState(totalCount, checkedCount);
container.update(info);
button.setText(text);
button.setVisible(checkedCount);
toolbar.setVisible(totalCount);
}
});
labs/architecture-examples/extjs/js/model/Task.js
View file @ a053160d
Ext.define('Todo.model.Task', {
extend: 'Ext.data.Model',
fields: ['id', 'label', {name: 'checked', type: 'boolean'}],
proxy: {
type: 'localstorage',
id: 'todos-extjs'
}
extend: 'Ext.data.Model',
fields: ['id', 'label', {name: 'checked', type: 'boolean'}],
proxy: {
type: 'localstorage',
id: 'todos-extjs'
}
});
labs/architecture-examples/extjs/js/store/Tasks.js
View file @ a053160d
Ext.define('Todo.store.Tasks', {
autoLoad: true,
model: 'Todo.model.Task',
extend: 'Ext.data.Store'
autoLoad: true,
model: 'Todo.model.Task',
extend: 'Ext.data.Store'
});
labs/architecture-examples/extjs/js/view/CheckAllBox.js
View file @ a053160d
Ext.define('Todo.view.CheckAllBox' , {
extend: 'Ext.Component',
alias: 'widget.checkAllBox',
tpl: '<tpl if="hasContent"><input id="toggle-all" type="checkbox" <tpl if="allComplete">checked</tpl>> <label for="toggle-all">Mark all as complete</label></tpl>',
updateCheckedState: function (totalTasks, checkedTasks) {
this.update({
hasContent: !!totalTasks,
allComplete: checkedTasks == totalTasks
});
},
listeners: {
render: function (component) {
component.getEl().on('click', function (event, el) {
var checked = !!Ext.get(el).getAttribute('checked');
this.fireEvent('click', checked);
}, this, {
delegate: 'input'
});
}
}
extend: 'Ext.Component',
alias: 'widget.checkAllBox',
tpl: '<tpl if="hasContent"><input id="toggle-all" type="checkbox" <tpl if="allComplete">checked</tpl>> <label for="toggle-all">Mark all as complete</label></tpl>',
updateCheckedState: function (totalTasks, checkedTasks) {
this.update({
hasContent: !!totalTasks,
allComplete: checkedTasks == totalTasks
});
},
listeners: {
render: function (component) {
component.getEl().on('click', function (event, el) {
var checked = !!Ext.get(el).getAttribute('checked');
this.fireEvent('click', checked);
}, this, {
delegate: 'input'
});
}
}
});
labs/architecture-examples/extjs/js/view/TaskCompleteButton.js
View file @ a053160d
Ext.define('Todo.view.TaskCompleteButton' , {
extend: 'Ext.Button',
alias: 'widget.completeButton',
tpl: Ext.create('Ext.XTemplate', '<a id="clear-completed">{text}</a>', {compiled: true}),
setText: function (text) {
this.update({text:text});
}
extend: 'Ext.Button',
alias: 'widget.completeButton',
tpl: Ext.create('Ext.XTemplate', '<a id="clear-completed">{text}</a>', {compiled: true}),
setText: function (text) {
this.update({text:text});
}
});
labs/architecture-examples/extjs/js/view/TaskField.js
View file @ a053160d
Ext.define('Todo.view.TaskField' , {
enableKeyEvents: true,
enableKeyEvents: true,
alias : 'widget.taskField',
alias : 'widget.taskField',
extend: 'Ext.Component',
extend: 'Ext.Component',
emptyText: 'What needs to be done?',
emptyText: 'What needs to be done?',
afterRender: function() {
this.callParent(arguments);
this.field = this.el.first();
this.field.on('keyup', this.onKeyup, this);
},
afterRender: function() {
this.callParent(arguments);
this.field = this.el.first();
this.field.on('keyup', this.onKeyup, this);
},
onKeyup: function(event) {
this.fireEvent('keyup', this, event);
},
onKeyup: function(event) {
this.fireEvent('keyup', this, event);
},
getValue: function() {
return this.field.dom.value;
},
getValue: function() {
return this.field.dom.value;
},
setValue: function(value) {
this.field.dom.value = value;
},
setValue: function(value) {
this.field.dom.value = value;
},
reset: function() {
this.setValue('');
}
reset: function() {
this.setValue('');
}
});
labs/architecture-examples/extjs/js/view/TaskList.js
View file @ a053160d
Ext.define('Todo.view.TaskList' , {
store: 'Tasks',
loadMask: false,
itemSelector: 'li',
extend: 'Ext.view.View',
alias : 'widget.taskList',
autoEl: '<ul id="todo-list" />',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<li class="<tpl if="checked">done</tpl> <tpl if="editing">editing</tpl>">',
'<div class="view">',
'<input type="checkbox" <tpl if="checked">checked</tpl> /> ',
'<label>{label}</label>',
'<a class="destroy"></a>',
'</div>',
'<input class="edit" type="text" value="{label}">',
'</li>',
'</tpl>',
{compiled: true}
),
listeners: {
render: function () {
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'checkbox') {
parent = extEl.parent('li');
this.fireEvent('todoChecked', this.getRecord(parent));
}
}, this, {
// TODO I can't get this to delegate using something like div.view input or input[type="checkbox"]
// So this will have a bug with teh input.edit field... I need to figure that out so I don't have to
// do the if logic above.
delegate: 'input'
});
store: 'Tasks',
loadMask: false,
itemSelector: 'li',
extend: 'Ext.view.View',
alias : 'widget.taskList',
autoEl: '<ul id="todo-list" />',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<li class="<tpl if="checked">done</tpl> <tpl if="editing">editing</tpl>">',
'<div class="view">',
'<input type="checkbox" <tpl if="checked">checked</tpl> /> ',
'<label>{label}</label>',
'<a class="destroy"></a>',
'</div>',
'<input class="edit" type="text" value="{label}">',
'</li>',
'</tpl>',
{compiled: true}
),
listeners: {
render: function () {
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'checkbox') {
parent = extEl.parent('li');
this.fireEvent('todoChecked', this.getRecord(parent));
}
}, this, {
// TODO I can't get this to delegate using something like div.view input or input[type="checkbox"]
// So this will have a bug with teh input.edit field... I need to figure that out so I don't have to
// do the if logic above.
delegate: 'input'
});
this.el.on('keyup', function (keyEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'text') {
parent = extEl.parent('li');
this.fireEvent('onTaskEditKeyup', keyEvent, this.getRecord(parent), extEl);
}
}, this, {
delegate: 'input'
});
this.el.on('keyup', function (keyEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'text') {
parent = extEl.parent('li');
this.fireEvent('onTaskEditKeyup', keyEvent, this.getRecord(parent), extEl);
}
}, this, {
delegate: 'input'
});
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, record = this.getRecord(extEl.parent('li'))
, self = this;
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, record = this.getRecord(extEl.parent('li'))
, self = this;
// Todo this is clearly not the best way to do this, but without this we get an error when
// the item that was clicked is removed.
setTimeout(function () { self.fireEvent('todoRemoveSelected', record); }, 1);
}, this, {
delegate: 'a'
});
}
}
// Todo this is clearly not the best way to do this, but without this we get an error when
// the item that was clicked is removed.
setTimeout(function () { self.fireEvent('todoRemoveSelected', record); }, 1);
}, this, {
delegate: 'a'
});
}
}
});
labs/architecture-examples/extjs/js/view/TaskToolbar.js
View file @ a053160d
Ext.define('Todo.view.TaskToolbar' , {
hidden: true,
extend: 'Ext.Toolbar',
alias : 'widget.taskToolbar',
autoEl: {tag: 'footer'},
requires: ['Todo.view.TaskCompleteButton'],
items: [{
xtype: 'completeButton'
}, {
xtype: 'container'
}]
hidden: true,
extend: 'Ext.Toolbar',
alias : 'widget.taskToolbar',
autoEl: {tag: 'footer'},
requires: ['Todo.view.TaskCompleteButton'],
items: [{
xtype: 'completeButton'
}, {
xtype: 'container'
}]
});
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