I am using a grid panel in which I need to make a column as a link(It should look like link-with no action). I am using listener in the gridpanel and on click of a cell its working fine. Only thing is 1st column should look like a link. But how to put href="#" I am not sure. This is my code:
var addressDetailsStore = Ext.create('Ext.data.Store', {
id:'addressDetailsStore',
autoLoad: true,
fields:
[
'addressType',
'street1',
'street2',
'province',
'city',
'country'
],
proxy: {
type: 'ajax',
url: 'resources/json/addressDetails.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
}
}
});
Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
layout: 'fit',
collapsible: true,
title:'Address',
store: addressDetailsStore,
listeners:{
cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..
}
I just want 'addressType' columns appear like a link and I dont know where to put href...
Thanks for your responses.
-Praveen
You could also use a template column:
columns: [
{ text: 'External Link', xtype: 'templatecolumn', tpl: '{title}'}
]
You can specify the columns you want, and for the column with just a link, add a renderer. This example might help you.
var template = new Ext.XTemplate(
' ').compile();
columns:[
{
header: "",
renderer: function () {
return template.applyTemplate();
}
},
You can use renderer function like as follow
columns: [
{
header: 'number',
dataIndex: 'number',
flex: 1,
renderer: function(number) {
return Ext.String.format('{0}', number);
}
},
Related
I want to send post request in sencha touch and the arguments I want to post are dynamic i.e. I want to take the textField values as a parameters to post. Please help me
proxy: {
type: "ajax",
url:'http://anotherserver.com/query.php',
method:'post',
extraParams: {
val: "TextField1.Text" // **here I want to provide the value of the textField help me plz**
},
reader: {
type: "json",
rootProperty: "notes",
totalProperty: "total"
}
},
Look first for Sencha Touch model concept because your can tag along your model into your Form (Ext.FormPanel) and treat it as one.
var model = Ext.create('Ext.data.Model',{
fields: ['name', 'email', 'password'],
proxy: [] //your proxy settings here,
customFunctionWithAjax: function(){
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
//after filling up your form you can get all textfields value
//with .getValues() and set it to your model
model.setData(form.getValues);
//then you can do anything you want like SAVE, or update
model.save();
//or call your custom function with your customised ajax request
model.customFunctionWithAjax();
// you can also check if your data are correct before sending it using .validate();
model.validate();
Usually you want to wrap the text field inside a form (formpanel).
Then you can use
var form = Ext.Viewport.down('.formpanel'),
values = form.getValues(),
textfieldValue = values.textfield_name;
...
extraParams: {
val: textfieldValue
},
I'm trying to call 2 values from my store, and set it inside the styles in a div which I put it in a html: item. The store loads the data from a web API, which is working fine(I've tested using fiddler and the return response is correct) but I cant get the data in the store to work inside the html item.
Below is my view:
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
requires:['myapp.store.Style'],
items: [
{
id: 'firstpage',
title: 'Welcome',
store: 'styleStore',
styleHtmlContent: true,
scrollable: true,
items: [
{
html: ['<div id="testStr1" style="font-style:{FontStyle}; color:{Color};">',
'This is a test string.',
' Go to the settings to change the style',
'</div>'
].join("")
}
]
},
}
]
}
My Store:
Ext.define('myapp.store.Styles', {
extend: 'Ext.data.Store',
requires:[
'myapp.model.Style'
],
config: {
autoLoad: true,
model: 'myapp.model.Style',
storeId: 'styleStore',
clearOnPageLoad:false,
proxy:
{
type: 'ajax',
listeners: {
exception:{
fn: function(pxy, response, operation, options){console.log("We've got a problem...");}
}
},
url: 'http://localhost/styleapi/api/styles',
reader: {
type: 'json',
rootProperty: 'data',
}
}
}
});
My model:
Ext.define('myapp.model.Style', {
extend: 'Ext.data.Model',
fields:[
{
name: 'Id',
type: 'int'
},
{
name: 'FontStyle'
},
{
name: 'Color'
},
],
proxy: {
type: 'rest',
url: 'http://localhost/styleapi/api/styles'
}
});
A few issues here...
First, your main class, myapp.view.Main, is nesting items inside it, and those items are not configured correctly. Your items: ... should be inside of config, and there should be an xtype for each item, if you want the item to not be the default type of container. In your current code, you have an items: .. config on your first item, where you are putting html. This results in a nested component, which is not what you are intending here.
In addition, you are using html, when you really want to use a template. When you have a fixed set (or object) of data, you can use a component with tpl and data; when using a store for the data, you would use a dataview with an itemTpl config, which will repeat that template for each item in the store. Currently, your top-level item is defaulting to a container, where you are using a store config, which won't do anything at the moment.
So, steps to fix:
Move the top-level item into config property
Change the top-level item to be a dataview
Move the html out of the nested item and into an itemTpl property as an XTemplate (i.e. itemTpl: new Ext.XTemplate('<div ...'))
I am new for this platform, Now i am unable to set dyanimic url using category id and token.
What i want:
I have list different items, which have different ids but same token, token(tokent is same one user) getting from login phase. I want to get value accorading to category id from the server.
Here is the my model:
Ext.define('MyApp.model.CategoryDisplayModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category',
'name',
],
belongsTo: "MyApp.model.CategoryDisplayModel"
}
});
and another related model is:
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'},
],
}
});
What i am set in store, but could not work:
Ext.define('MyApp.store.CategoryValueStore', {
extend: 'Ext.data.Store',
alias: 'store.CategoryValueStore',
requires: [
'MyApp.model.CategoryDisplayModel'
],
config: {
model: 'MyApp.model.CategoryDisplayModel',
storeId: 'categoriesvaluestore',
proxy: {
type: 'rest',
url: 'http://horror/myapp/api/word/searched_words/catID/'+ 1+'/'+ SDSILLYTOKEN+'/'+650773253e7f157a93c53d47a866204dedc7c363,
noCache: false,
reader: {
type: 'json',
rootProperty: ''
} } }
});
How to set above url, dynamic, cat id and token may be differnt.
But it works when i set these in store
Ext.define('MyApp.store.ArchitectureDisplayStore',{
extend: 'Ext.data.Store',
requires:[
'MyApp.view.Main'
],
config:
{
model: 'MyApp.model.CategoryDisplayModel',
autoLoad:true,
id:'Category',
proxy:
{
type: 'ajax',
url : 'http://horror/myapp/api/word/searched_words/catID/1/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363', // file containing json data
reader:
{
rootProperty:''
} } }
});
In View , I set getting value on list like this:
Ext.define("MyApp.view.ArchitectureDisplayMain", {
extend: 'Ext.Container',
alias: "widget.architecturewords",
config: {
{
xtype: 'list',
scrollable: true,
itemId: 'demolist',
itemTpl: [
'<div><tpl for="data"><ul class="catList">{name} -test- {category}</ul> <ul>{author}</ul></tpl></div>'
],
store: 'categoriesvaluestore',
}
}
});
My category display model:
Ext.define('MyApp.model.CategoryModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
'cat_id',
'category_name',
],
belongsTo: "MyApp.model.CategoryModel"
}
});
and
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'},
],
}
});
EDIT:
Ext.define('MyApp.view.Category', {
extend: 'Ext.List',
alias: "widget.category",
config: {
title: 'Stores',
cls: 'category-data',
scrollable: false,
store: 'CategoryStore',
itemTpl: [
'<div class="categoryListings">',
'<tpl for="data">',
'<span onClick="catOption({cat_id})">{category_name}</span> ',
'</tpl>',
'</div>',
].join('')
}
//}
});
function catOption(id){
console.log("ID--"+id);
var tokan= '650773253e7f157a93c53d47a866204dedc7c363';
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add([
{ xtype: 'wordsview' }
]);
} and others
In wordsview, I like to display respective words of clicked category.
It is ok, when click this, first item of id p1, it shows next view.
Please tell me, How to get dynamic data accorading to its category id and token. please give some solution.Thank you advance.
If i understood you correctly
Let's say if you have category id and token in localStorage.
You can do like this
proxy:
{
type: 'ajax',
url : 'http://horror/myapp/api/word/searched_words/catID/'+localStorage.catId+'/SDSILLYTOKEN/'+localStorage.token,
reader:{
rootProperty:''
}
}
OR
Do as #Alex posted. That is better way.. Like
function catOption(id){
console.log("ID--"+id);
var token= '650773253e7f157a93c53d47a866204dedc7c363';
var url = 'http://horror/myapp/api/word/searched_words/catID/'+id+'/SDSILLYTOKEN/'+token;
Ext.getStore("categoriesvaluestore").getProxy().setUrl(url);
Ext.getStore("categoriesvaluestore").load();
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add({ xtype: 'wordsview' });
}
When accessing your Store from your View or anywhere else, you can dinamically change the Url this way:
var stProxy = Ext.StoreMgr.get("myStore").getProxy();
stProxy.setUrl("http://the.new.url");
Ext.StoreMgr.set("myStore").setProxy(stProxy);
--
The particular problem in your scenario is that you may have to populate your list manually. If you want a List to include the result of calling the same Store with different URLs, I suggest to build a new local Store loading the content of all iterations. Then make the List "store" property be this global Store.
I have a form and a grid to submit a query,like this:
items:[
{
fieldLabel: 'query the month',
xtype : 'textfield',
name : 'query_year_month',
id: 'query_year_month'
} ],
buttons: {
text: 'submit',
formBind: true, //only enabled once the form is valid
disabled: false,
handler: function() {
//some code
}
var store = Ext.create('Ext.data.Store', {
model: //uncertain,
region : 'south',
pageSize: 15,
proxy: {
type: 'ajax',
url : 'brokee/brokagequery/',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: false
});
I'd like to load data to a grid after submiting the form.The return data is a json
structure,I don't want to define the static model bind to the store and neither the grid columns,because the data returned is uncertained. The store model and grid columns should be generated from the json data,
for example: json: {'field1':data1, 'field2':data2}
the model should be generated like this:
Ext.define('somemodel', {
extend: 'Ext.data.Model',
fields: [
{name: 'field1', type: 'string'},
{name: 'field2', type: 'string'}
]
});
In the official demo, the store and model are predefined, then call the store.load method to refresh the grid throuth the proxy.But how can I do that when the store and model need to be generated?
When you have your json loaded, you can create store store/model like this.... use record .raw to extract values and :
Ext.create("Ext.data.JsonStore",{
id:record.raw.storeID,
model: Ext.define('App.dataGridModel', {
extend: 'Ext.data.Model',
fields: [record.raw.id, record.raw.first]...
})
...
});
the same with the grid etc..
I am using Extjs 4 ComboBox with remote mode. but when i typed any character data is not filtered. and even focus is changed only for first 12 value.
I am new to Extjs 4. Please help me how to do this.
my code is:
Ext.define('MyGroup.combo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.mycombo',
emptyText:'select keyword',
store: keywordStore,
valueField:'name',
displayField:'name',
mode: 'remote',
autoSelect: false,
selectOnFocus:true,
//shadow:true,
//forceSelection: false,
//triggerAction: 'all',
hideTrigger:true,
//multiSelect:true,
typeAhead:true,
minChars:1
});
Ext.define('keywordModel', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url : '/keywordServlet',
method:'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [
{name: 'name', mapping: 'name'}
]
});
var keywordStore = Ext.create('Ext.data.Store', {
// pageSize: 10,
model: 'keywordModel'
});
As per my knowledge i think this will be helpful for you:
Ext.define('MyGroup.combo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.mycombo',
initComponent: function() {
this.callParent([arguments]);
}
});
var keywordStore = Ext.create('Ext.data.SimpleStore',{
fields: ['id', 'name'],
data: [[1, 'mr'],[2, 'mr(yes)'],[3, 'mr(no)'], [4, 'example'], [5, 'example(yes)'],[6,'example(no)'],[7,'sample'],[8,'sample(yes)'],[9,'sample(no)'],[10,'mrs'],[11,'mrs(yes)'],[12,'mrs(no)']]
});
Ext.widget('mycombo',{
xtype : 'combo',
emptyText:'select keyword',
store: keywordStore,
valueField:'name',
displayField:'name',
mode: 'remote',
autoSelect: false,
selectOnFocus:true,
//shadow:true,
//forceSelection: false,
//triggerAction: 'all',
hideTrigger:true,
//multiSelect:true,
typeAhead:true,
minChars:1,
renderTo :document.body
});
And one more thing is no one is trying to answer each and every question,but every one is trying to help some body like us:-)