I have a layout in which I want to show list items on left-pane. How can I show list items there along with some click event?
{
docked: 'left',
style: 'background:#7b7b7b',
html: 'Here I want to show Ext.List'
}
My List items are Home, About, User, Help.
Your List..instead of "html: 'Here I want to show Ext.List'"
withe the listeners you can creat some tap events
items: [
{ xtype: 'list',
store: 'NaviStore',
id: 'NaviList',
itemTpl: '<div class="contact">{text}',
scrollable: false,
listeners:{
itemtap: function (obj, idx, target){
alert(List is Clicked);
}
}
}]
Your store
Ext.define('MyApp.store.NaviStore', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.NaviModel',
config: {
model: 'MyApp.model.NaviModel',
data: [
{ text: 'Item1'},
{ text: 'Item2'},
{ text: 'Item3'},
{ text: 'Item4'}
],
autoLoad: true
}
});
Your model
Ext.define('MyApp.model.NaviModel', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
Related
I built a view and I want to do some manipulation of the elements, after the view has been painted.
I am trying to use the "painted" event with no avail.
Any ideas why?
Ext.define('TestApp.view.phone.RegisterViewPhone', {
extend: 'Ext.Panel',
xtype: 'RegisterViewPhone',
config: {
items: [
{
xtype: 'Header'
},{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT'
},{
xtype: 'Footer'
}
],
listeners: [
{
delegate: '#thePanel',
event: 'painted',
fn: 'onPainted'
}
]
},
onPainted: function () {
alert('hey!');
}
});
You can attach listeners to that particular element like
{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT',
listeners: {
painted: function(){
alert('hey!');
}
}
}
As painted is not dependent on individual element and it acts on page scope also U can write it in views directly
items: [
],
listeners: {
painted: function () {
alert('hey!');
}
Is there a way to dynamically populate a combobox with the attributes a certain property of an artifact can take on?
e.g.
I have a custom field set up on User Stories. I want to be able to populate a combobox with all the possible values for this custom field without hard-coding it in.
In the code below the combobox is automatically populated with the allowed values of the custom field of dropdown type:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [
{
xtype: 'container',
itemId: 'kbFilter'
},
{
xtype: 'container',
itemId: 'grid',
width: 800
}
],
launch: function() {
this.down('#kbFilter').add({
xtype: 'checkbox',
cls: 'filter',
boxLabel: 'Filter table by custom field',
id: 'kbCheckbox',
scope: this,
handler: this._onSettingsChange
});
this.down('#kbFilter').add({
xtype: 'rallyattributecombobox',
cls: 'filter',
model: 'Defect',
field: 'MyKB',
listeners: {
ready: this._onKBComboBoxLoad,
select: this._onKBComboBoxSelect,
scope: this
}
});
},
_onKBComboBoxLoad: function(comboBox) {
this.kbComboBox = comboBox;
Rally.data.ModelFactory.getModel({
type: 'Defect',
success: this._onModelRetrieved,
scope: this
});
},
_getFilter: function() {
var filter = [];
if (Ext.getCmp('kbCheckbox').getValue()) {
filter.push({
property: 'MyKB',
operator: '=',
value: this.kbComboBox.getValue()
});
}
return filter;
},
_onKBComboBoxSelect: function() {
if (Ext.getCmp('kbCheckbox').getValue()) {
this._onSettingsChange();
}
},
_onSettingsChange: function() {
this.grid.filter(this._getFilter(), true, true);
},
_onModelRetrieved: function(model) {
this.grid = this.down('#grid').add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Name',
'MyKB'
],
storeConfig: {
context: this.context.getDataContext(),
filters: this._getFilter()
},
showPagingToolbar: false
});
}
});
In this example I have a dropdown field with Name: myKB and Display Name: My KB.
In the WS API the name shows with prepended c_, as in c_myKB.
However, if I use c_myKB this error comes up:
Uncaught Rally.ui.combobox.FieldValueComboBox._populateStore(): field config must be specified when creating a Rally.ui.combobox.FieldValueComboBox
Use the display name of the field, without spaces.
Here is a screenshot showing this app in action:
Since 2 days, I am trying to create Infinite carousel with desired data but could not get it. I also tried Kitchen Sink (Touch Style). My theme is also same as touch style. I have categories and If I click one category then display associated respective Words , which is more different carousel items.
I don't know how many words are there. but I want to display 7 Words in one swiping view(If i have 35 then i need 5 view), which is carousel items, Just like kitchen sink(Touch style).
Source: http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
and Click Dress and you have to show dressess.
I want to display like this only.
I just displayed categories but could not display category respective words.
What I have done until now:
View/CategoryPage.js
Ext.define('MyApp.view.CategoryPage', {
extend: 'Ext.Container',
alias: "widget.categorypage",
config: {
layout: 'vbox',
items: [
{
xtype:'globalmenu',
},
{
xtype: 'toolbar',
//docked: 'top',
cls:'roundedToolbar',
title: 'Categories',
},
{
xtype:'panel',
flex: 1,
layout: 'fit',
cls: 'category-data',
items:[
{
scrollable: {
direction: 'vertical',
directionLock: true,
},
xtype: 'list',
layout: 'fit',
itemHeight: 20,
store: 'CategoryStore',
itemTpl: [
'<div class="categoryListings">',
'<tpl for="data">',
'<span onClick="catOption({cat_id})">{category_name}</span> ',
//'<span >{category_name}</span> ',
'</tpl>',
'</div>',
].join(''),
listeners: {
itemtap : function(list, index, target, record, event,cat_id) {
//var id = index;
var id = index + 1;
console.log( "iOS" + id);
catOption(id);
}
}
}
]
},
]
}
});
function catOption(id){
console.log("ID--"+id);
var token= '650773253e7f157a93c53d47a866204dedc7c363';
var url = 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words_with_definition/catID/'+id+'/SDSILLYTOKEN/'+token;
var stProxy = Ext.StoreMgr.get("CategoryWordDisplayStore").getProxy();
stProxy.setUrl(url);
Ext.getStore("CategoryWordDisplayStore").load();
Ext.Viewport.remove(Ext.Viewport.animateActiveItem({ xtype: 'categorywordsdisplay' },{type:'slide'}), true);
}
If one of the Category Click then Display respective words,
Ext.define("MyApp.view.CategoryWordDisplayMain", {
extend: 'Ext.Container',
alias: "widget.categorywordsdisplay",
requires:"Ext.dataview.List",
config: {
layout: 'vbox',
items: [
{
xtype: 'globalmenu',
flex: 1,
},//end of top menu
{
xtype:'panel',
scrollable: false,
flex: 3,
layout: 'fit',
items:[
{
flex: 1,
xtype: 'toolbar',
/* title: "Help", */
cls:'roundedToolbar',
title: 'value',
docked: 'top',
itemId:'titleid',
id:'titleid',
},
{
xtype: 'list',
scrollable: true,
itemId: 'demolist',
// html:'Test',
loadingText:"Loading ....",
emptyText: "<div class=\"words-list-empty-text\">No Words found.</div>",
//onItemDisclosure: true,
// grouped: true,
itemTpl: [
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2 class="noStar" onclick = "addtofavourite({word_id})"><b>{name}</b> </h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div class="paragraph-def" onclick = "ratingStar({def_id})">','{defintion}',
'<span class="authorBox"><i>Author: {author}</i></span>',
'</li>' ,
'</div>',
'</ul></li>',
'</tpl>',
'<div class="yesStar" ></div>',
'</ul>',
'</tpl>',
'</div>'
].join(''),
store: 'CategoryWordDisplayStore',
}
]
},//end of menuitems
]
},
initialize : function(){
this.callParent();
var store = Ext.getStore('CategoryWordDisplayStore');
console.log("category ----"+store.getAt(0).getData().name);
this.down('toolbar').setHtml(store.getAt(0).getData().category);
},
});
function home(){
console.log("Home CategoryPage CLick");
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add([
{ xtype: 'mainmenuview' }
]);
}
Category Display Model
model/CagegoryModel.js
Ext.define('MyApp.model.CategoryModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'cat_id'},
{name: 'category_name'},
],
},
});
and
Ext.define('MyApp.model.CategoryModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category_name',
],
belongsTo: "MyApp.model.CategoryModel"
}
});
Word Display Model After Click Category:
Ext.define('MyApp.model.CategoryDisplayModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryDisplayModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name:'name'},
{name: 'category'},
{name: 'author'},
],
}
});
and
Ext.define('MyApp.model.CategoryDisplayModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category',
'name',
],
belongsTo: "MyApp.model.CategoryDisplayModel"
}
Stores:
Category Display Store:
Ext.define('MyApp.store.CategoryStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryModel',
autoLoad:true,
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363',
reader:
{
rootProperty:''
}
}
}
});
});
Word Display Stores:
Ext.define('MyApp.store.CategoryWordDisplayStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryDisplayModel',
autoLoad:true,
id:'Category',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words/',
reader:
{
rootProperty:''
}
},
}
});
I have not created any controller yet.
JSON: Category Json and
First Category(catID=1) Word Json If i swip right then cat id change 2 and again swip right then 3 and so on. if I swip left from the 3 cat id, then goto cat id 2.
please hep me out.Thank in Advance.
I currently have a list that is coming through a store fine, and the itemTpl is putting a div inside each list item with a specific ID. What I want to do know is use a controller to execute different functions on each specific list item when it is tapped. I have a controller set up but it doesn't seem to be referencing it.
Any help would be great
View:
Ext.define('tourApp.view.TourInfo', {
extend: 'Ext.List',
xtype: 'TourInfo',
config: {
navigationBar: {
hidden: true
},
title: 'Tour Info',
iconCls: 'MyTourInfoIcon nav-schedule',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: '<span class="logo"></span>'
},
{
xtype: 'list',
store: 'TourInfoList',
id: 'lolol',
itemTpl: '<div id="TIList{id}" class="TIList"><div class="TIListTitle">{title}</div></div>'
}
]
}
});
Controller:
Ext.define('tourApp.controller.TourInfo', {
extend: 'Ext.app.Controller',
config: {
refs: {
Tdetails: 'TourInfo',
main: 'TourInfo'
},
control: {
"TourInfo list #TIList1": {
tap: 'test'
}
}
},
test: function() {
console.log('Success');
}
});
Use the select event for this..
control: {
'TourInfo list': {
select: function(list, record, eOpts) { console.log('test'); }
}
}
Good evening.
The initial view of my application need to get some data from a Store (autoLoad = true) to change some components of it. At what point can I do this?
View:
Ext.define('App.view.EmpresaPanel', {
extend: 'Ext.Container',
alias: 'widget.empresapanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Menu',
layout: {
align: 'center',
type: 'hbox'
}
},
{
xtype: 'titlebar',
docked: 'bottom',
title: '2012 ©',
layout: {
align: 'center',
type: 'hbox'
}
}
]
}
});
Store:
Ext.define('App.store.Empresa', {
extend: 'Ext.data.Store',
requires: [
'App.model.Empresa'
],
config: {
autoLoad: true,
autoSync: true,
model: 'App.model.Empresa',
storeId: 'EmpresaStore',
proxy: {
type: 'ajax',
url: 'http://URL',
reader: {
type: 'json',
rootProperty: 'empresa'
}
}
}
});
Controller:
Ext.define('App.controller.Empresa', {
extend: 'Ext.app.Controller',
config: {
refs: {
empresaPanel: 'empresapanel'
},
control: {
"empresapanel": {
initialize: 'onContainerInitialize'
}
}
},
onContainerInitialize: function(component, options) {
var store = Ext.getStore("EmpresaStore"),
record = store.findRecord("id", "1");
console.log(store);
console.log(record);
}
});
First appears in console.log: Ext.apply.create.Class
In the second: null
If I put a button in this view and tap the same event I run the same code that is in the function "onContainerInitialize" the record is completed.
Is there a specific time after the creation of view where you can access data from the Store?
Thank you!
You should add listener for store load event to access record from the store.
Here is an example how you can do it. Put following code inside of the onContainerInitialize:
store.on('load', function(t) {
var record = t.findRecord("id", "1");
console.log(record);
}, this, {single: true});