I am using extjs grid and want to store the order and width of the columns for the users.
I have added:
var dateExpires = new Date().getTime()+(1000*60*60*24*300);
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(dateExpires) //300 days from now
}));
Now is the order of the columns stored but still missing the size for the columns. I don't use forcefit because i saw that could be an issue.
This is how a column look like
{
xtype: 'gridpanel',
id: 'GridPanel',
titleCollapse: false,
store: 'gridStore',
stateId: 'gridPanelState',
region: 'center',
viewConfig: {},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'vehicle',
text: 'Vehicle'
},
{
xtype: 'gridcolumn',
dataIndex: 'speed',
text: 'Speed'
},
{
xtype: 'gridcolumn',
dataIndex: 'routeId',
text: 'RouteId'
},
{
xtype: 'gridcolumn',
dataIndex: 'direction',
text: 'Direction'
},
{
xtype: 'gridcolumn',
dataIndex: 'description',
text: 'Description'
}
],
Related
I am not able to disable the button on form validation fails. I want to use regex: /^[0-9]+(,[0-9]+)*$/ for text area validation. I want to disable activatebutton.
I tried formBind and monitor validate still not working.
Here is the code:
items: [{
xtype: 'container',
layout: {
type: 'column'
},
items: [{
columnWidth: .75,
layout: "form",
monitorValid: true,
items: {
fieldLabel: 'Please Enter Activation Id',
name: 'Activate',
xtype: 'textarea',
msgTarget: 'under',
growMax: 200,
allowBlank: false,
blankText: "Please Enter Comma separated AssetIds",
regex: /^[0-9]+(,[0-9]+)*$/,
anchor: '100%'
}
}, {
columnWidth: .25,
items: {
xtype: 'button',
name: 'button',
id: 'activatebutton',
width: 100,
text: 'Set for auto-activation',
formBind: true,
listeners: {
click: function () {
shared.Notifier.success('The requ ');
this.seForActivation();
},
scope: this
}
}
}]
}]
In order for the formBind to work, you need to have an Ext.form.Panel.
The form panel will process the checks of the form fields and call the formBind when the whole form is valid.
The following code will propcess the formBind, see also the working Fiddle and the Ext.form.Panel documentation.
{
xtype: 'form',
layout: 'column',
items: [{
columnWidth: .75,
layout: "form",
monitorValid: true,
items: {
fieldLabel: 'Please Enter Activation Id',
name: 'Activate',
xtype: 'textarea',
msgTarget: 'under',
growMax: 200,
allowBlank: false,
blankText: "Please Enter Comma separated AssetIds",
regex: /^[0-9]+(,[0-9]+)*$/,
anchor: '100%'
}
}, {
columnWidth: .25,
items: {
xtype: 'button',
name: 'button',
id: 'activatebutton',
width: 100,
text: 'Set for auto-activation',
formBind: true,
listeners: {
click: function () {
shared.Notifier.success('The requ ');
this.seForActivation();
},
scope: this
}
}
}]
I am trying to get my Ext.Menu with a list to respond to my event in my Controller.
I am not sure why I can not get a response from the list in the Ext.Menu.
Could someone please tell me what I am missing.
Thanks
Ext.define('Pear.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.Menu'
],
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Sliding Menu',
items: [
{
xtype: 'button',
id: 'listButton',
iconCls: 'list',
ui: 'plain',
handler: function(){
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
}
else
{
Ext.Viewport.hideMenu('left');
}
}
}
]
}
]
},
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
layout: 'fit',
width: 220,
xtype:'menuList',
items: [{
xtype: 'titlebar',
title: 'Side menu'
}, {
xtype: 'list',
itemTpl: '{title}',
//store: 'Beginning',
data: [{
title: 'Menu item 1'
}, {
title: 'Menu item 2'
},
{
title: 'Menu item 3'
}, {
title: 'Menu item 4'
}]
}]
});
return menu;
}
});
My Controller
Ext.define( 'Pear.controller.Main', {
extend:'Ext.app.Controller',
config:{
refs: {
Main: 'main',
},
control: {
'main list ':{
itemtap:function(list,index,target,record){
console.log("Option 2 Tapped");
}
},
},
}
});
Your list reference is wrong. Best way to get the reference of an item is to set a config name property to that item like this:-
{
xtype: 'list',
itemTpl: '{title}',
name: 'menu_list', // add this property to get the reference
data: [{
title: 'Menu item 1'
}, {
title: 'Menu item 2'
},
{
title: 'Menu item 3'
}, {
title: 'Menu item 4'
}]
}
Add the control in the controller:-
Ext.define( 'Pear.controller.Main', {
extend:'Ext.app.Controller',
config:{
refs: {
menuList : "list[name='menu_list']"
},
control: {
menuList : {
itemtap: function(list,index,target,record){
console.log("Option 2 Tapped");
}
}
}
}
});
I have added two buttons to my container and now tap on list items not working.Please help.
Code
Ext.define('X.SelectCategories', {
extend: 'Ext.Container',
xtype: 'selectcategorypanel',
id: 'SelectCategories',
requires:[
],
initialize:function(){
this.callParent();
jsonObject = Ext.create('Tablet').make_webservice_call('get_categories');
Ext.getCmp('select_category_list').setData(jsonObject.info);
console.log(jsonObject.info);
//this.getNavigationBar.hide();
},
config: {
//title : 'Select Categories',
//iconCls: 'team',
//styleHtmlContent: true,
// scrollable: true,
layout: {
type: 'fit'
},
items: [
{
//fullscreen: true,
mode: 'MULTI',
/*
layout: {
type: 'fit'
},
*/
//title:'Select Categories',
xtype: 'list',
itemTpl: '{name}',
autoLoad: true,
id:'select_category_list',
store: {
fields: ['name','title']
}
},
{
xtype: 'container',
//fullscreen: true,
layout: {
type: 'vbox'
},
flex : 1,
layout: {
type : 'hbox',
align: 'bottom'
},
defaults: {
xtype : 'button',
flex : 1,
margin: 10
},
items: [
{ui: 'round',ui:"confirm" ,text: 'Save',id: 'categorysaveButton'},
{ui: 'round', ui:"decline" ,text: 'Reset',id: 'categoryresetButton'}
]
}
]
}
})
Try extend Navigationview extend: 'Ext.navigation.View',
I'm trying to write simple view with list on container but i have some problems.
First of all, the List is not visible when I'm trying to do it like this:
Ext.define('App.view.News', {
extend: 'Ext.Container',
but when it's written like this:
Ext.define('App.view.News', {
extend: 'Ext.navigation.View',
it works.
The problem is that when I write it with extend of navigation.View, im getting two toolbars on top and I can't find solution to disable the second one (added by the list).
Full code:
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});
Help please!
You need to give your container a layout and your list a flex property. The flex is important on lists as they don't have a viewable height since they scroll. I added a couple properties to your code below. Hope this helps.
Ext.define('App.view.News', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'news',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
style: ' background-color:white;',
layout: 'vbox', // add a layout
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'News',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton',
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'list',
itemTpl: '{title},{author}',
flex: 1, // add a flex property
store: {
autoLoad: true,
fields : ['title', 'author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
]
}
});
Hi I don't understand why I don't see my list in tab3...
This is my code...
I add one record in myStore but I don't see the list...
Thanks in advance!
var mainForm ;
var mainFormPanel={};
var addToXml=function (values){};
var htmlTemplate='<p>{b}</p><p>{m}</p><p>{f}</p>';
var template = new Ext.Template(htmlTemplate);
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: [
{name: 'id', type: 'string'},
{name: 'c', type: 'string'},
{name: 'd', type: 'string'},
{name: 'q', type: 'string'},
{name: 'n', type: 'string'}
]
}); // create()
myStore.add({id:"id",c:"222",d:"333",q:"444",n:"555"});
var listpanel;
var config={
glossOnIcon: false,
autoMaximize: false,
icon: {
57: 'lib/sencha-touch/resources/icons/icon.png',
72: 'lib/sencha-touch/resources/icons/icon#72.png',
114: 'lib/sencha-touch/resources/icons/icon#2x.png',
144: 'lib/sencha-touch/resources/icons/icon#114.png'
},
phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',
//next we require any components we are using in our application.
requires: [
'Ext.tab.Panel',
'Ext.form.*',
'Ext.field.*',
'Ext.Button',
'Ext.data.Store'
],
launch: function() {
var list= Ext.create("Ext.NavigationView",{
xtype: 'list',
itemTpl: 'D:{id} - C:{c}',
store: myStore,
fullscreen: true,
layout:'fit',
title:'listtitle',
onItemDisclosure: function (record, btn, index) {
view.push({
xtype: 'panel',
renderTo: document.body,
layout:'fit',
title: 'second view',
html: 'second view',
styleHtmlContent: true
});
}
});
var myTitle= {
xtype: 'titlebar',
id: 'myTitle',
docked: 'top',
title: 'mytitle'//,
};
var myMean={
xtype: 'titlebar',
id: 'myMean',
docked: 'bottom',
title: 'myMean'
};
listpanel = new Ext.Panel({
xtype:'panel',
header:true,
layout: 'fit', // important to make layout as 'fit'
id:'listpanel',
title:'listpanel',
items: [myTitle,myMean,list]
});
var view = Ext.create("Ext.NavigationView", {
layout:'fit',
id:'view',
items: [listpanel]
});
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
items: [
{
title: '1-tab',
layout:'fit',
iconCls: 'home',
html:'tab1',
cls: 'card1'
},
{
title: '2-tab',
layout:'fit',
iconCls: 'download',
html:'tab2',
cls: 'card2'
},
{
title: '3-tab',
layout:'fit',
iconCls: 'home',
items: [view],
cls: 'card3'
},
{
title: '4-tabs',
layout:'fit',
iconCls: 'home',
html: '4-tab',
cls: 'card4'
}
]
});
}
};
Ext.application(config);
have you tried setting flex: 1, layout: 'vbox' instead of layout: 'fit'?
Solved deleting fullscreen: true,layout:'fit' in var list.