I need a delete icon in my Sencha touch application and when it is clicked a confirm message should me displayed.This is what I required.But,it was taken to a new page.Is there a way to solve this?
Why did you write xtype: 'formpanel'? It should be xtype:'button' instea. This works for me:
{
title: 'Delete',
iconCls: 'delete',
cls: 'home',
xtype:'button' ,
handler: function()
{
var del=confirm('Are you sure');
if(del) {
console.log('confirm');
} ;
},
},
Related
I have two instances of the class AddressPanel on the panel.
Ext.define('AddressPanel', {
extend: 'Ext.tab.Panel',
initComponent: function() {
this.items = [
{
title: 'Stations',
itemId : 'pointStation',
closable: false,
items:[
{
xtype: 'combo',
fieldLabel: 'station',
store: stationStore,
queryMode: 'remote',
displayField: 'name',
valueField: 'id',
editable : false
}
Both of them contain comboboxes that are associated with the same very basic store
var stationStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url : '/address/stationname'
}
});
I can open the combo from the first instance and choose a station.
Then I can open the combo from the second instance and choose another station.
It works fine.
But when I open the combobox from the first instance of AddressPanel again I get an endless loading.
How can I fix it?
Thank you in advance.
You could add an id to your combobox and when you go from the first instance to the second you can reset your combobox with
Ext.getCmp('id').reset();
I made two copies of the store and set the store config of the the first combo to the first copy of the store and the store config of the second combo to the second copy.
It helps.
The new release of ExtJS can make your chrome unstable (Or is it my code?)! Let me explain my situation.
I am working on the new MVC architecture of ExtJS 4.0. I have a tree panel displaying my applications menu or navigation. As per the architecture, I tried to split my tree panel into controller, view and a separate store.
Here is my view:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: 'MainMenu',
rootVisible: false
});
this.callParent(arguments);
}
});
My tree's store:
Ext.define('CRM.store.MainMenu', {
extend: 'Ext.data.TreeStore',
constructor: function() {
console.log('Constructor of MainMenu TreeStore');
config = Ext.apply(this,{
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
});
this.callParent(arguments);
}
});
And in my controller I have provided my store info as well. Here is part of my controller config:
Ext.define('CRM.controller.MainMenu',{
extend: 'Ext.app.Controller',
stores: ['MainMenu'],
refs: [
{ref:'menu',selector: 'menutree'},
{ref:'cp',selector: 'centerpane'}
],
.
.
.
On initial execution, I get the following error:
Object MainMenu has no method
'getRootNode'
But now, I get more weird error:
Notice that chrome stops execution in the constructor of the tree store.
At the same time, in firefox:
Firefox executes better, but there is no application rendered!
After some trail and error.. I did find a way to get my application running.. and that is to avoid using my store and directly provide the store information as shown below:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: {
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
},
rootVisible: false
});
this.callParent(arguments);
}
});
Now the application executes with no issues at all!
Did anybody try creating tree panel using MVC architecture? I have no clue into how to fix this!
Looks like this is a known problem!!! Quoting from the ExtJS forums:
The parent class of "Ext.tree.Panel"
looks for the store in the store
manager in the "initComponent" method,
but "Ext.tree.Panel" tries to use it
before.
So, One way would be to code your store into your tree another way is to reassign the store in initComponent method. Here is the code:
initComponent: function(){
this.store = Ext.data.StoreManager.lookup(this.store);
this.callParent(arguments);
}
I need to dynamically populate a form from fields in a database using EXT JS forms and ASP.NET MVC and I'm having trouble finding a starting point.
The database includes all of the settings: the field names, the field data types and the original field data. When a menu is clicked on the application's main page, the clicked item's settings should appear on a separate form. The data types include checkboxes, textfields, and possibly combo boxes.
I can easily return all of the settings in Json, but I know the form will need to iterate either with Ext.each or some other method, but I'm having trouble getting my head around this. I've also thought about using an Ext reusable type as a template that accepts Json data from the database to determine the field name, type and content.
something like this:
TextSettings = Ext.extend(Ext.Container, {
layout: 'column',
autoHeight: true,
autoWidth: true,
initComponent: function() {
this.items = [
{
xtype: 'container',
style: 'float:left;clear:left;',
items: [
{
xtype: 'label',
text: 'Setting Name',
style: 'display:block;',
ref: '../../../NameLabel'
},
{
xtype: 'label',
text: 'Setting description',
style: 'display:block;font-style:italic;',
ref: '../../../DescriptionLabel'
}
]
},
{
xtype: 'container',
style: 'float:right;clear:right;',
items: [
{
xtype: 'textfield',
width: 300,
ref: '../../../SettingEdit'
}
]
}
];
TextSettings.superclass.initComponent.call(this);
}
});
Does this look like a crash course?
Has anyone else done something similar?
I ran across this Ajax function online (probably the Sencha forums) and it seems to be working.
var ajax = Ext.Ajax.request({
url: '/Controller/Items',
method: 'get',
success: function (response) {
response = Ext.util.JSON.decode(response.responseText);
//form.add(Ext.decode(response.responseText).data);
for (i = 0; i < response.data.length; i++) {
form.add({
xtype: response.data[i].xtype,
fieldLabel: response.data[i].text,
name: response.data[i].name,
value: response.data[i].value,
style: response.data[i].style,
items: response.data[i].items,
width: response.data[i].width
});
}
form.doLayout();
}
});
With the following Json output:
{success: true, data: [{xtype: 'label', text: 'Report', style: 'display:block', ref: '../../../Displaylabel' },{xtype: 'label', text: \"Report Text\", style: 'display:block;font-style:italic;', ref: '../../../DescriptionLabel'},{xtype: \"textfield\", width: 300, ref: \"../../../SettingEdit\", value: \"A comment... for YOU!!!\"}, {xtype: 'checkbox', text: 'Check it for fun'}]}
Still more work to go, but this is at least giving me dynamic text fields.
Allright, I'm testing the Sencha Touch framework wrapped in Phonegap and compiled to a HTC Desire with Android 2.2. The purpose of this application is just to get familiar with the Framework and it's (in)capabilities.
I'm using the MVC model. The application consists of a list of items that are loaded into a data store from a json file using a proxy. When one of those items is clicked, a detail page is shown.
app.views.viewport.setActiveItem(app.views.placesList, options.animation);
But before the transition, there is some kind of lag, and a white screen is shown for a very small amount of time. I made a vid to make it more clear:
http://www.youtube.com/watch?v=uW8hspMKqfc
The code below shows the structure and functionality of my application:
Model
app.models.Place = Ext.regModel("app.models.Place", {
fields: [
{name: "name", type: "string"},
{name: "location", type: "string"}
]
});
app.stores.places = new Ext.data.Store({
model: "app.models.Place",
proxy: {
type: 'ajax',
url : 'js/app/data/products.json',
reader: {
type: 'json',
root: 'products'
}
}
});
View
app.views.PlacesList = Ext.extend(Ext.Panel, {
fullscreen: true,
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
title: 'PlacesList'
}],
items: [{
xtype: 'list',
store: app.stores.places,
itemTpl: '{name}',
onItemDisclosure: function () {
Ext.dispatch({
controller: app.controllers.places,
action: 'show'
});
}
}],
initComponent: function() {
app.stores.places.load();
app.views.PlacesList.superclass.initComponent.apply(this, arguments);
}
});
Controller
app.controllers.places = new Ext.Controller({
show: function(options) {
app.views.viewport.setActiveItem(app.views.placeDetail, options.animation);
},
back: function(options) {
app.views.viewport.setActiveItem(app.views.placesList, options.animation);
}
});
I'm wondering if the experienced lag is just something that comes with Sencha Touch, or comes from the code.
Thanks in advance,
Gerard
Credit Steffen Hiller for this answer: This bug appears for all transitions that set the opacity in CSS, which the slide animation in Sencha Touch does. Credits go to the interesting Performance tips for device page."
To clarify previous answers:
If you use the slide animation just for your panels within a card layout (e.g. via Ext.TabPanel), just add the following CSS/SCSS code and all will be fine.
.x-panel {
-webkit-backface-visibility: hidden;
}
I'm using Sencha Touch 1.0.1a and PhoneGap 0.9.4.
Credit for this goes to Steffen Hiller for hist post here: http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html
I have a main panel that is comprised of sub panels and I would like to fire an event in the main panel and listen to it on the sub panel.
I can fire the event within the subpanel and everything works but i can't seem the fire the event from the main panel.
My namespace for the sub panel is "test.testCard" and I've tried to fire the event on it with no success.
Here is an example of how to do this:
Ext.setup({
onReady: function() {
var mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
renderTo: Ext.getBody(),
listeners: {
'mycustomevent': function() {
alert('event fired!');
}
},
items: [
{
items: [
{
html: 'My inner panel'
},
{
xtype: 'button',
text: 'Click me!',
handler: function() {
mainPanel.fireEvent('mycustomevent', this);
}
}
]
}
]
});
}
});
You can see that I am creating a reference to mainPanel and then referencing it later in my code in the button handler, where I then call fireEvent with my custom event. Then in my mainPanel, I am adding a listener for mycustomevent.
And as previously noted, it is best to post on the Sencha Forums, as you will get a much faster response.