Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
todomvc
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Eugene Shen
todomvc
Commits
352327f7
Commit
352327f7
authored
May 27, 2012
by
Aaron Boushley
Committed by
Sindre Sorhus
May 27, 2012
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Merge ExtJS branch into master
parent
a2f8f05c
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
510 additions
and
165 deletions
+510
-165
architecture-examples/extjs/css/app.css
architecture-examples/extjs/css/app.css
+206
-0
architecture-examples/extjs/index.html
architecture-examples/extjs/index.html
+16
-8
architecture-examples/extjs/js/app.js
architecture-examples/extjs/js/app.js
+21
-16
architecture-examples/extjs/js/controller/Tasks.js
architecture-examples/extjs/js/controller/Tasks.js
+138
-87
architecture-examples/extjs/js/model/Task.js
architecture-examples/extjs/js/model/Task.js
+6
-6
architecture-examples/extjs/js/store/Tasks.js
architecture-examples/extjs/js/store/Tasks.js
+3
-3
architecture-examples/extjs/js/view/CheckAllBox.js
architecture-examples/extjs/js/view/CheckAllBox.js
+21
-0
architecture-examples/extjs/js/view/TaskCompleteButton.js
architecture-examples/extjs/js/view/TaskCompleteButton.js
+8
-0
architecture-examples/extjs/js/view/TaskField.js
architecture-examples/extjs/js/view/TaskField.js
+22
-22
architecture-examples/extjs/js/view/TaskList.js
architecture-examples/extjs/js/view/TaskList.js
+59
-14
architecture-examples/extjs/js/view/TaskToolbar.js
architecture-examples/extjs/js/view/TaskToolbar.js
+10
-9
No files found.
architecture-examples/extjs/css/app.css
0 → 100755
View file @
352327f7
html
,
body
{
margin
:
0
;
padding
:
0
;
}
:focus
{
outline
:
none
;
}
body
{
font
:
14px
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
line-height
:
1.4em
;
background
:
#eeeeee
;
color
:
#333333
;
width
:
520px
;
margin
:
0
auto
;
-webkit-font-smoothing
:
antialiased
;
}
#todoapp
{
background
:
#fff
;
padding
:
20px
;
margin-bottom
:
40px
;
-webkit-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
2px
6px
0
;
-moz-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
2px
6px
0
;
-ms-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
2px
6px
0
;
-o-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
2px
6px
0
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
2px
6px
0
;
-webkit-border-radius
:
0
0
5px
5px
;
-moz-border-radius
:
0
0
5px
5px
;
-ms-border-radius
:
0
0
5px
5px
;
-o-border-radius
:
0
0
5px
5px
;
border-radius
:
0
0
5px
5px
;
}
#todoapp
h1
{
font-size
:
36px
;
font-weight
:
bold
;
text-align
:
center
;
padding
:
0
0
10px
0
;
}
#todoapp
input
[
type
=
"text"
]
{
width
:
466px
;
font-size
:
24px
;
font-family
:
inherit
;
line-height
:
1.4em
;
border
:
0
;
outline
:
none
;
padding
:
6px
;
border
:
1px
solid
#999999
;
-webkit-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
-moz-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
-ms-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
-o-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
1px
2px
0
inset
;
}
#todoapp
input
::-webkit-input-placeholder
{
font-style
:
italic
;
}
#todo-list
{
margin
:
10px
0
;
padding
:
0
;
list-style
:
none
;
}
#todo-list
li
{
padding
:
18px
20px
18px
0
;
position
:
relative
;
font-size
:
24px
;
border-bottom
:
1px
solid
#cccccc
;
}
#todo-list
li
:last-child
{
border-bottom
:
none
;
}
#todo-list
li
.done
label
{
color
:
#777777
;
text-decoration
:
line-through
;
}
#todo-list
li
.destroy
{
display
:
none
;
position
:
absolute
;
top
:
20px
;
right
:
10px
;
cursor
:
pointer
;
width
:
20px
;
height
:
20px
;
background
:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=')
no-repeat
center
center
;
}
#todo-list
li
:hover
.destroy
{
display
:
block
;
}
#todo-list
li
.editing
{
border-bottom
:
none
;
margin-top
:
-1px
;
padding
:
0
;
}
#todo-list
li
.editing
:last-child
{
margin-bottom
:
-1px
;
}
#todo-list
li
.editing
.edit
{
display
:
block
;
width
:
444px
;
padding
:
13px
15px
14px
20px
;
margin
:
0
;
}
#todo-list
li
.editing
.view
{
display
:
none
;
}
#todo-list
li
.view
label
{
word-break
:
break-word
;
}
#todo-list
li
.edit
{
display
:
none
;
}
#todoapp
footer
{
margin
:
0
-20px
-20px
-20px
;
overflow
:
hidden
;
color
:
#555555
;
background
:
#f4fce8
;
border-top
:
1px
solid
#ededed
;
padding
:
0
20px
;
line-height
:
37px
;
-webkit-border-radius
:
0
0
5px
5px
;
-moz-border-radius
:
0
0
5px
5px
;
-ms-border-radius
:
0
0
5px
5px
;
-o-border-radius
:
0
0
5px
5px
;
border-radius
:
0
0
5px
5px
;
}
#clear-completed
{
float
:
right
;
line-height
:
20px
;
text-decoration
:
none
;
background
:
rgba
(
0
,
0
,
0
,
0.1
);
color
:
#555555
;
font-size
:
11px
;
margin-top
:
8px
;
margin-bottom
:
8px
;
padding
:
0
10px
1px
;
cursor
:
pointer
;
-webkit-border-radius
:
12px
;
-moz-border-radius
:
12px
;
-ms-border-radius
:
12px
;
-o-border-radius
:
12px
;
border-radius
:
12px
;
-webkit-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
-1px
0
0
;
-moz-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
-1px
0
0
;
-ms-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
-1px
0
0
;
-o-box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
-1px
0
0
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.2
)
0
-1px
0
0
;
}
#clear-completed
:hover
{
background
:
rgba
(
0
,
0
,
0
,
0.15
);
-webkit-box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
-moz-box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
-ms-box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
-o-box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.3
)
0
-1px
0
0
;
}
#clear-completed
:active
{
position
:
relative
;
top
:
1px
;
}
#todo-count
span
{
font-weight
:
bold
;
}
#instructions
{
margin
:
10px
auto
;
color
:
#777777
;
text-shadow
:
rgba
(
255
,
255
,
255
,
0.8
)
0
1px
0
;
text-align
:
center
;
}
#instructions
a
{
color
:
#336699
;
}
#credits
{
margin
:
30px
auto
;
color
:
#999
;
text-shadow
:
rgba
(
255
,
255
,
255
,
0.8
)
0
1px
0
;
text-align
:
center
;
}
#credits
a
{
color
:
#888
;
}
architecture-examples/extjs/index.html
View file @
352327f7
<!doctype html>
<html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
>
<title>
ExtJS• TodoMVC
</title>
<link
rel=
"stylesheet"
href=
"css/style.css"
>
<title>
ExtJS • TodoMVC
</title>
<link
rel=
"stylesheet"
href=
"../assets/base.css"
>
<link
rel=
"stylesheet"
href=
"css/app.css"
>
<!--[if IE]>
<script src="../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<div
id=
"todo"
>
<h1>
Todos
</h1>
<input
type=
"text"
id=
"taskfield"
placeholder=
"What needs to be done?"
/>
<div
id=
"todoapp"
>
<header>
<h1>
Todos
</h1>
<input
id=
"new-todo"
type=
"text"
placeholder=
"What needs to be done?"
>
</header>
<section
id=
"main"
></section>
</div>
<div
class=
"credits"
>
Credits:
<br
/><a
href=
"http://revolunet.com/"
>
Revolunet
</a>
<div
id=
"instructions"
>
Double-click to edit a todo.
</div>
<div
id=
"credits"
>
Created by
<a
href=
"http://revolunet.com/"
>
Revolunet
</a><br
/>
Updates by
<a
href=
"http://github.com/boushley"
>
Aaron Boushley
</a>
</div>
<script
src=
"../../assets/base.js"
></script>
<script
src=
"http://extjs.cachefly.net/ext-4.0.2a/bootstrap.js"
></script>
...
...
architecture-examples/extjs/js/app.js
View file @
352327f7
Ext
.
Loader
.
setConfig
({
enabled
:
true
});
Ext
.
application
({
name
:
'
Todo
'
,
appFolder
:
'
js
'
,
controllers
:
[
'
Tasks
'
],
launch
:
function
()
{
name
:
'
Todo
'
,
appFolder
:
'
js
'
,
controllers
:
[
'
Tasks
'
],
launch
:
function
()
{
Ext
.
create
(
'
Ext.container.Container
'
,
{
renderTo
:
'
todo
'
,
items
:
[{
xtype
:
'
taskField
'
,
contentEl
:
'
taskfield
'
},
{
xtype
:
'
taskList
'
},
{
xtype
:
'
taskToolbar
'
}]
});
Ext
.
create
(
'
Todo.view.TaskField
'
,
{
renderTo
:
Ext
.
select
(
'
header
'
).
first
(),
contentEl
:
'
new-todo
'
});
}
Ext
.
create
(
'
Todo.view.CheckAllBox
'
,
{
renderTo
:
'
main
'
});
Ext
.
create
(
'
Todo.view.TaskList
'
,
{
renderTo
:
'
main
'
});
Ext
.
create
(
'
Todo.view.TaskToolbar
'
,
{
renderTo
:
'
todoapp
'
});
}
});
architecture-examples/extjs/js/controller/Tasks.js
View file @
352327f7
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
'
}
],
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
.
keyCode
===
13
&&
value
!==
''
)
{
var
store
=
this
.
getTasksStore
();
store
.
add
({
label
:
value
,
checked
:
false
});
field
.
reset
();
store
.
sync
();
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
(
keyEvent
,
record
,
extEl
)
{
var
ENTER_KEY_CODE
=
13
;
if
(
event
.
keyCode
===
ENTER_KEY_CODE
)
{
this
.
finalizeTaskEdit
(
extEl
,
record
);
}
},
finalizeTaskEdit
:
function
(
extEl
,
record
)
{
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
);
}
},
onListItemClick
:
function
(
list
,
record
,
el
)
{
record
.
set
(
'
checked
'
,
!
record
.
get
(
'
checked
'
));
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
();
},
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
'
:
''
);
}
container
.
update
(
info
);
button
.
setText
(
text
);
button
.
setVisible
(
checkedCount
);
toolbar
.
setVisible
(
totalCount
);
}
});
architecture-examples/extjs/js/model/Task.js
View file @
352327f7
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
'
}
});
architecture-examples/extjs/js/store/Tasks.js
View file @
352327f7
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
'
});
architecture-examples/extjs/js/view/CheckAllBox.js
0 → 100644
View file @
352327f7
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
'
});
}
}
});
architecture-examples/extjs/js/view/TaskCompleteButton.js
0 → 100644
View file @
352327f7
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
});
}
});
architecture-examples/extjs/js/view/TaskField.js
View file @
352327f7
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
;
},
setValue
:
function
(
value
)
{
this
.
field
.
dom
.
value
=
value
;
},
getValue
:
function
()
{
return
this
.
field
.
dom
.
value
;
},
reset
:
function
()
{
this
.
setValue
(
''
);
}
setValue
:
function
(
value
)
{
this
.
field
.
dom
.
value
=
value
;
},
reset
:
function
()
{
this
.
setValue
(
''
);
}
});
architecture-examples/extjs/js/view/TaskList.js
View file @
352327f7
Ext
.
define
(
'
Todo.view.TaskList
'
,
{
store
:
'
Tasks
'
,
loadMask
:
false
,
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
}
)
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
(
'
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
'
});
}
}
});
architecture-examples/extjs/js/view/TaskToolbar.js
View file @
352327f7
Ext
.
define
(
'
Todo.view.TaskToolbar
'
,
{
hidden
:
true
,
extend
:
'
Ext.Toolbar
'
,
alias
:
'
widget.taskToolbar
'
,
items
:
[{
xtype
:
'
button
'
,
hidden
:
true
},
{
xtype
:
'
container
'
}]
hidden
:
true
,
extend
:
'
Ext.Toolbar
'
,
alias
:
'
widget.taskToolbar
'
,
autoEl
:
{
tag
:
'
footer
'
},
requires
:
[
'
Todo.view.TaskCompleteButton
'
],
items
:
[{
xtype
:
'
completeButton
'
},
{
xtype
:
'
container
'
}]
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment